xx-xx-xx-xx
Hjem
xx-xx-xx-xx
Skriv til os
Hent tilbud

Magna Event (Header)

Inden vi begynder skal du lige ind i Udseende > Menuer og klikke på Skærmindstillinger og klikke alt af deroppe – undtagen tags (lol).

Lad os så komme i gang...

Jeg prøver lige noget anderledes her og laver en decideret “how to use” tutorial. Nedenstående er dokumentation for denne header. Det kører på Elementors native Advanced Menu element. Ingen Nested elements.

Husk at installere plugin’et “Safe SVG“. Det sikrer at sektionen fungerer optimalt.

Bonus info: Den skifter også farve i headeren, udfra om man scroller over lys eller mørk baggrund – dog kun hvis man vælger at køre med en transparent header.

Se headeren

Importer skabelon

Importer nedenstående skabelon til dit skabelon kartotek på den hjemmeside du ønsker at bruge den, så du kan frigive sektionen på din hjemmeside.

Under knappen har jeg tilføjet CSS’en til “Tilpas“, som du blot indsætter i bunden af denne. Juster efter behov.

Hent skabelon 
				
					/* FANCY MENU */

.pp-advanced-menu > li > a {
	position: relative;
}

.pp-advanced-menu > li > a .menu-beskrivelse {
	position: absolute;
	top: 3px !important;
	left: 0px;
	font-size: 8px;
	font-weight: 600 !important;
	line-height: 1.9em;
	letter-spacing: 0.025em !important;
	padding: 0px 4px;
	background-color: #f05619;
	color: #FFF !important;
	border-radius: 2px;
	pointer-events: none !important;
}

.pp-advanced-menu > li > ul {
	padding: 8px 8px !important;
	border-radius: 8px !important;
}

.pp-advanced-menu > li > ul > li {
	padding: 0px !important;
	border-radius: 8px !important;
	overflow: hidden;
	transition: transform 0.15s linear, box-shadow 0.15s ease !important;
}

.pp-advanced-menu > li > ul > li > a {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0px;
	position: relative;
	padding-left: 56px !important;
	padding-right: 43px !important;
	border-right: solid 0px red;
	transition: font-weight 0.15s ease, color 0s linear, background-color 0s linear !important;
}

.pp-advanced-menu > li > ul > li > a::after {
	content: "";
	height: 10px;
	width: 10px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(/wp-content/uploads/2026/03/arrow-nav-1.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.pp-advanced-menu > li > ul > li:hover > a::after, .pp-advanced-menu > li > ul > li > a.pp-menu-item-active:after {
	background-image: url(/wp-content/uploads/2026/03/arrow-nav-2.svg) !important;
}

.pp-advanced-menu > li > ul > li:has(a.pp-menu-item-active) {
	transform: scale(1) !important;
	order: 1 !important;
}

.pp-advanced-menu > li > ul > li > a > .menu-fa-ikon {
	position: absolute;
	left: 16px !important;
	top: 50%;
	transform: translateY(-50%);
	color: #f05619 !important;
	font-size: 16px;
	padding: 0px !important;
	line-height: 1em !important;
	text-align: center;
	width: 26px !important;
	transition: color 0s ease !important;
}

.pp-advanced-menu > li > ul > li:hover > a > .menu-fa-ikon {
	color: #FFF !important;
}

.pp-advanced-menu > li > ul > li > a > span.menu-beskrivelse {
	font-size: 10px;
	display: block !important;
	white-space: wrap;
	font-weight: 400;
	color: #333;
	opacity: 0.65;
	line-height: 1.5em;
	text-transform: initial !important;
	transition: color 0s ease, opacity 0s ease, font-weight 0.15s ease !important;
}

.pp-advanced-menu > li > ul > li:hover > a > span.menu-beskrivelse {
	color: #FFF !important;
}

.pp-advanced-menu > li > ul > li > a.pp-menu-item-active > span.menu-beskrivelse, .pp-advanced-menu > li > ul > li > a.pp-menu-item-active > .menu-fa-ikon {
	color: #fff !important;
}

@media (min-width: 1024px) {
	.pp-advanced-menu > li > ul > li:hover {
		transform: scale(1.1);
	}
	
	.pp-advanced-menu > li > ul > li:has(a.pp-menu-item-active) {
		transform: scale(1) !important;
		box-shadow: none !important;
	}
	
	.pp-advanced-menu > li > ul > li:hover {
		box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.25) !important;
		z-index: 1;
	}
}

@media (max-width: 1024px) {
	.pp-advanced-menu > li > ul {
		padding: 0px !important;
		border-radius: 0px !important;
	}
	
	.pp-advanced-menu > li > a {
		border-bottom: solid 1px rgba(255,255,255,0.05) !important;
	}
	
	.pp-advanced-menu > li > ul > li {
		border-radius: 0px !important;
	}
	
	.pp-advanced-menu > li > ul > li.current-menu-item > a {
		background-color: #f05619 !important;
		color: #FFF !important;
	}
	
	.pp-advanced-menu > li > ul > li > a {
		padding: 20px 30px 20px 79px !important;
	}
	
	.pp-advanced-menu > li > ul > li > a > .menu-fa-ikon {
		left: 30px !important;
	}
	
	.pp-advanced-menu > li > a {
		display:flex !important;
		gap: 15px;
		align-items: center !important;
	}
	
	.pp-advanced-menu > li > a > .sub-arrow {
		flex: 1 !important;
		text-align: right !important;
	}
	
	.pp-advanced-menu > li > a .menu-beskrivelse {
		top: 0px !important;
		left: 0px !important;
		position: initial;
		display: inline-block !important;
		font-size: 12px;
		padding: 2px 8px
	}
	
	.pp-advanced-menu > li > ul > li > a::after {
		right: 30px;
		height: 10px;
		width: 10px;
	}
	
	.pp-advanced-menu > li > ul > li > a > span.menu-beskrivelse {
		font-size: 12px;
	}
}

/* BEVÆGELSE DROPDOWN */

@media (min-width: 1024px) {
.pp-advanced-menu ul.sub-menu {
	display: block !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  visibility: hidden !important;
  transition: 
    opacity    0.3s ease-out,
    transform  0.3s ease-out,
    visibility 0.3s ease-out !important;
}

.pp-advanced-menu li.menu-item-has-children:hover > ul.sub-menu, .pp-advanced-menu li.menu-item-has-children:focus-within > ul.sub-menu {   /* også godt for keyboard navigation */
  opacity:    1 !important;
  transform:  translateY(-6px) !important;
  visibility: visible !important;
}
}

Vi er der ikke helt endnu...

Der er lige lidt mere kode vi skal have tilføjet, nedenstående skal indsættes i Elementor > Editor > Custom elements > Kode.

Navngiv den gerne noget retvisende ala “Font Awesome” og sæt prioritet til “10“. KUN de GRATIS og SOLID.

Ikoner fra Font Awesome kan findes på nedenstående knap og skal skrives ind som eksempelvis “fa-solid fa-users“:

Find ikoner 
				
					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous">

The penultimate stretch

Nedenstående kode er til functions.php – sæt det ind nederst i din functions.php – dette åbner op for at vi kan vælge Font Awesome ikoner og lave labels, subtekster til menupunkterne.

				
					// ================================================
// KOMBINERET: Menu-beskrivelse + Font Awesome ikon
// Virker med & og andre specialtegn i titlen
// ================================================

add_filter( 'walker_nav_menu_start_el', 'vis_menu_beskrivelse_og_fa_ikon', 10, 4 );

function vis_menu_beskrivelse_og_fa_ikon( $item_output, $item, $depth, $args ) {

    // 1. Hent Font Awesome ikon-klasse hvis den findes
    $fa_klasse = get_post_meta( $item->ID, '_menu_item_fa_klasse', true );
    $ikon_html = ! empty( $fa_klasse ) 
        ? '<i class="' . esc_attr( $fa_klasse ) . ' menu-fa-ikon" aria-hidden="true"></i> ' 
        : '';

    // 2. Byg nyt indhold inde i <a>-tagget (brug rå $item->title så & virker)
    $nyt_indhold = $args->link_before . $ikon_html . $item->title;

    if ( ! empty( $item->description ) ) {
        $nyt_indhold .= '<span class="menu-beskrivelse">' . esc_html( $item->description ) . '</span>';
    }

    $nyt_indhold .= $args->link_after;

    // 3. Robust erstatning af indholdet i <a>-tagget (virker selv med &amp;)
    $item_output = preg_replace(
        '/(<a[^>]*>)(.*?)<\/a>/is',
        '$1' . $nyt_indhold . '</a>',
        $item_output,
        1
    );

    return $item_output;
}

// ================================================
// FONT AWESOME – resten af koden (uændret)
// ================================================

// 1. Load Font Awesome 6 via CDN
function enqueue_font_awesome() {
    wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css', array(), '6.7.2' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );

// 2. Tilføj feltet "Font Awesome ikon klasse" i menu-editoren
function tilfoj_fa_ikon_felt_til_menu( $item_id, $item ) {
    $fa_klasse = get_post_meta( $item_id, '_menu_item_fa_klasse', true );
    ?>
    <p class="field-menu-fa-ikon description description-wide">
        <label for="edit-menu-item-fa-<?php echo $item_id; ?>">
            Font Awesome ikon klasse (f.eks. fa-solid fa-house, fa-regular fa-envelope):<br>
            <input type="text"
                   id="edit-menu-item-fa-<?php echo $item_id; ?>"
                   class="widefat code"
                   name="menu-item-fa-klasse[<?php echo $item_id; ?>]"
                   value="<?php echo esc_attr( $fa_klasse ); ?>" />
        </label>
        <small style="color:#666;">Find klasser på https://fontawesome.com/search (free icons)</small>
    </p>
    <?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'tilfoj_fa_ikon_felt_til_menu', 10, 2 );

// 3. Gem værdien når menuen opdateres
function gem_menu_fa_klasse( $menu_id, $menu_item_db_id ) {
    if ( isset( $_POST['menu-item-fa-klasse'][$menu_item_db_id] ) ) {
        $fa_klasse = sanitize_text_field( $_POST['menu-item-fa-klasse'][$menu_item_db_id] );
        if ( ! empty( $fa_klasse ) ) {
            update_post_meta( $menu_item_db_id, '_menu_item_fa_klasse', $fa_klasse );
        } else {
            delete_post_meta( $menu_item_db_id, '_menu_item_fa_klasse' );
        }
    }
}
add_action( 'wp_update_nav_menu_item', 'gem_menu_fa_klasse', 10, 2 );

Det absolut sidste du nok skal...

Gå igang med at bygge din menu, se billederne her under for hvordan dette gøres. Dette gøres under Udseende > Menuer.