[Support request] Drop down menu in secondary

Hi there,

there has been no change to the themes navigations during that time.
What you really require is a Third Navigation on your site, that supports drop down menus.

You can try adding this PHP Snippet to your site:

add_action( 'init', function() {
    register_nav_menu('third-menu',__( 'Third Menu' ));
} );

add_action( 'generate_before_header', function(){
    ?>
    <nav id="third-navigation" class="secondary-navigation">
    <div class="inside-navigation grid-container grid-parent">
    <?php
    wp_nav_menu(
        array(
            'theme_location' => 'third-menu',
            'container' => 'div',
            'container_class' => 'main-nav',
            'menu_class' => '',
        )
    );
    ?>
    </div>
    </nav>
    <?php
});

It will do two things:

1. Create a new Menu Location in Appearance Menus – called Third Menu
2. It will hook this Navigation in before the Site Header. And it will have the same styling as the Secondary Navigation. So you will want to use the Primary Nav in the Sidebar.

Things to note:
It will not have a Mobile Version ie. with a Hamburger, and by default it will be hidden. Which we can provide some CSS to unhide it on mobile and to change its colors.

Just to be clear.
For mobile, the third menu won’t have a mobile option.
The best option is to use the Off Canvas Panel for mobile – there you can construct a single combined menu.

Hi Loic,

To confirm, are you wanting to move the location of the third nav menu added to here?: https://share.getcloudapp.com/9ZumdB7K

If so, we can create a portable hook to do this.

Here are the steps:

1. Add this PHP:

function your_shortcode($atts, $content = null) {
      ob_start();
      do_action('hook_name');
      return ob_get_clean();
}
add_shortcode('portable_hook', 'your_shortcode');

2. Modify the previously added PHP provided by David to this:

add_action( 'init', function() {
    register_nav_menu('third-menu',__( 'Third Menu' ));
} );

add_action( 'hook_name', function(){
    ?>
    <nav id="third-navigation" class="secondary-navigation">
    <div class="inside-navigation grid-container grid-parent">
    <?php
    wp_nav_menu(
        array(
            'theme_location' => 'third-menu',
            'container' => 'div',
            'container_class' => 'main-nav',
            'menu_class' => '',
        )
    );
    ?>
    </div>
    </nav>
    <?php
});

3. Go to Appearance > Customize > Widgets > Top Bar, and add a Shortcode Block. Insert [portable_hook] in the Shortcode Block.

Here it is working on my end: https://share.getcloudapp.com/8LuDonBo

If it’s not appearing on Mobile or Table, you may need to add a CSS like this:

#third-navigation ul#menu-third-menu {
    display:flex;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding this through additional CSS should work.

Hope this clarifies. If you’re referring to something else, kindly let us know. 🙂

You’re welcome Loic! Glad to be of assistance! Yes, you can do a lot of things with GeneratePress, you’ll just need out of the box ideas/custom solutions or codes to achieve some. Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

Can you provide a login to your staging site ?

That site URL requires a login

Its not a WordPress login its a folder login:

https://www.screencast.com/t/sPAlIAvfX8