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.

OK thanks I have the third menu shown up in appearance. Will kindly ask you for mobile navigation later since menus are pushed to the bottom of the page ...

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.

Hello,

I wanted to have this menu with drop down in the top bar (as it is now). It seems that I can put only a widget here (no position in the menu customization) with no drop down. The menu below the header don't look good ...

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. :)

Look good ... Thanks for the code. I will try to implement this and let you know. I am more looking for such out of the box functional features than esthetic bells and whistles in themes like GP. I hope that you can improve the menu system in next releases. Navigation is key to more page views and users.

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. :)

Hello,

I did implement the changes on the staging site but I dont have much control on this third menu, I dont know how to customize it so it looks similar that on the page here ... https://www.monstrous.com/

Please advise,

Loïc

Can you provide a login to your staging site ?

yes sure. Seems that this third menu has same style as the secondary menu in the sidebar. Strangely, even hen clearing the cache the secondary menu don't show up and third menu remains vertical ...

That site URL requires a login

Thought I sent it previously

Its not a WordPress login its a folder login:

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

It works this the login/password