Extra Menü im eigenen Container

Q-Max

Hallo,
ich versuche oberhalb meines Headerbildes ein zusätzliches Menü zu installieren. Dafür hab ich in der style.css einen Container definiert.

style.css

PHP

/* Extra Menue my_extra_menu_id [class] = z_menu */


#z_menu {
        position: absolute;
        top: -1.5em;
        right: 1.5%;
        z-index: 999;
}
/** und noch mehr styles für ul usw.**/

In der Funktions.php habe ich die Zusatzmenüs so eingefügt (das dritte soll später mal in den Footer oder die Sidebar)

funktions.php

PHP

/**
         * This theme uses wp_nav_menu() in one location.   Jetzt koennen drei ausgewählt werden
         */


        register_nav_menus( array('primary' => __( 'Primary Menu', 'expound' ),


        ) );


         /** Extra Menue ueber dem Headerbild  *** Container-ID dafuer ist z_menu    **/


        function register_zusatz_menu() {


         register_nav_menus( array( 'header-menu' => __( 'Header Menue' ),
                                    'extra-menu' => __( 'Extra Menue' ))  );
          }


          add_action ('init', 'register_zusatz_menu');


        /** Ende Extra Menue **/

Alles anzeigen

und in der Header.php hab ich folgendes eingetragen:

Header.php

PHP

<header id="masthead" class="site-header" role="banner">


      /** Start extra-menue **/
         <nav id="site-navigation" class="navigation-main" role="navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'extra-menu',


                          'container_id' => 'z_menu' ) ); ?>     </nav>


          /** Ende extra-menue **/


                <div class="site-branding">
                        <div class="site-title-group">
                                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
                        </div>
                </div>




                <nav id="site-navigation" class="navigation-main" role="navigation">
                        <h1 class="menu-toggle"><?php _e( 'Menu', 'expound' ); ?></h1>
                        <div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'expound' ); ?>"><?php _e( 'Skip to content', 'expound' ); ?></a></div>


                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 3 ) ); ?>
                        <?php do_action( 'expound_navigation_after' ); ?>
                </nav><!-- #site-navigation -->

Alles anzeigen

Jetzt kann ich zwar zwei Menüs auswählen und auch unterschiedlich bestücken, das Ergebnis ist aber ein Menü mit allen Punkten beider Menüs oben im Headerbild.

Die Styles des Containers werden auch nicht benutzt.

Ich häng mal zwei Bilder dran zum besseren Verständnis:

Was hab ich falsch gemacht?
Ich hoffe ich mein Problem einigermaßen verständlich rübergebracht.

LG

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Q-Max

Hallo,
ich hab jetzt eine deutsche Anleitung gefunden. Damit hat das soweit funktioniert das ich das Menü sehe und es funktioniert.

Leider hab ich irgend ein Problem mit der Positionierung, die ich einfach nicht weg bekomme. Die Position des Menüs unterscheidet sich danach ob ich angemeldet bin oder nicht.

Also scheine ich ein Problem mit dem Menücontainer zu haben. Kann da mal jemand drauf schauen?

funktions.php

PHP

/**
         * This theme uses wp_nav_menu() in one location.   Jetzt koennen zwei ausgewählt werden
         */


        register_nav_menus( array('primary' => __( 'Primary Menu', 'expound' ),


        ) );


         /** Extra Menue ueber dem Headerbild  *** Container-ID dafuer ist z_menu    **/


        function register_my_menus()  {


         register_nav_menus( array( 'extra-menu' => __( 'Extra Menue' ))
         );


          }


          add_action ('init', 'register_my_menus');


        /** Ende Extra Menue **/

Alles anzeigen

header.php

PHP

<div id="page" class="hfeed site">
        <?php do_action( 'expound_header_before' ); ?>


        <header id="masthead" class="site-header" role="banner">


        <!-- ** Start extra-menue ** -->


                <?php wp_nav_menu( array( 'theme_location' => 'extra-menu',


                          'container_id' => 'z_menu' ) ); ?>


         <!-- ** Ende extra-menue ** -->




                <div class="site-branding">
                        <div class="site-title-group">
                                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
                        </div>
                </div>

Alles anzeigen

style.css

PHP

/* Extra Menue my_extra_menu_id [class] = z_menu */


#z_menu {
        position: absolute;
        top: 4em;
        right: 11%;
        z-index: 999;
}


#z_menu li {
        display: inline;
        list-style-type: none;
        padding-right: 15px;
}


#z_menu li a {
        color: #404040;
        text-decoration: none;
}


#z_menu li:hover > a,
#z_menu a:focus {
        background: #efefef;
}


#z_menu .current-menu-item > a,
#z_menu .current_page_item > a, {
        font-weight: bold;
}

Alles anzeigen

auf der Seite sieht das dann so aus:

Q-Max

Hallo,
ich hab jetzt eine deutsche Anleitung gefunden. Damit hat das soweit funktioniert das ich das Menü sehe und es funktioniert.

Leider hab ich irgend ein Problem mit der Positionierung, die ich einfach nicht weg bekomme. Die Position des Menüs unterscheidet sich danach ob ich angemeldet bin oder nicht.

Also scheine ich ein Problem mit dem Menücontainer zu haben. Kann da mal jemand drauf schauen?

funktions.php

PHP

/**
         * This theme uses wp_nav_menu() in one location.   Jetzt koennen zwei ausgewählt werden
         */


        register_nav_menus( array('primary' => __( 'Primary Menu', 'expound' ),


        ) );


         /** Extra Menue ueber dem Headerbild  *** Container-ID dafuer ist z_menu    **/


        function register_my_menus()  {


         register_nav_menus( array( 'extra-menu' => __( 'Extra Menue' ))
         );


          }


          add_action ('init', 'register_my_menus');


        /** Ende Extra Menue **/

Alles anzeigen

header.php

PHP

<div id="page" class="hfeed site">
        <?php do_action( 'expound_header_before' ); ?>


        <header id="masthead" class="site-header" role="banner">


        <!-- ** Start extra-menue ** -->


                <?php wp_nav_menu( array( 'theme_location' => 'extra-menu',


                          'container_id' => 'z_menu' ) ); ?>


         <!-- ** Ende extra-menue ** -->




                <div class="site-branding">
                        <div class="site-title-group">
                                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
                        </div>
                </div>

Alles anzeigen

style.css

PHP

/* Extra Menue my_extra_menu_id [class] = z_menu */


#z_menu {
        position: absolute;
        top: 4em;
        right: 11%;
        z-index: 999;
}


#z_menu li {
        display: inline;
        list-style-type: none;
        padding-right: 15px;
}


#z_menu li a {
        color: #404040;
        text-decoration: none;
}


#z_menu li:hover > a,
#z_menu a:focus {
        background: #efefef;
}


#z_menu .current-menu-item > a,
#z_menu .current_page_item > a, {
        font-weight: bold;
}

Alles anzeigen

LG

PS: auf der Seite sieht das dann so aus:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Extra Menü im eigenen Container

Jetzt mitmachen!