[Support request] Add extra menu in some pages

[Dylan]

Hey, I am rebuilding this website in WordPress for a client.
I’ve come pretty close so far using GeneratePress but I am stuck at this point.

I need the second menu on the three producten (products) categories. Those will be three different “second navigations”.
It has to be sticky and attached to the regular menu.

Attached the URL of the HTML site I am recreating. If you want my URL, please let’s PM.

Any ideas of how I can do this?

Regards.

[David]

Hi there,

dynamic menus for the secondary nav will require a plugin like Conditional Menus in the WP repo.
To make the entire header element sticky will require CSS – as the built in Sticky Nav won’t work.

If you want to set up the menus, and edit your original topic and change the site URL we can assist with the CSS

[Dylan]

I’ve set up the menu and added the link to the WordPress but at the moment instead of adding an extra menu it replaces the main menu. How should I set it up properly?

[Tom]

Hi there,

If you need a second menu, your best bet is to use the Secondary Navigation module. Then, you can use the plugin that David mentioned to replace the items in that menu depending on your set conditions.

Let me know if that helps or not 🙂

[Dylan]

Ok, thank you. How can I make the secondary navigation sticky with the regular menu?
+ I don’t want a mobile menu for my second navigation. Only for the regular menu.

[David]

To keep the secondary navigation horizontal ( ie. no mobile toggle ) – this article explains how:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

To make it sticky would mean disabling the GP Sticky Navigation and using some CSS on both navigations. If you want to disable after you have done the above then i can take a look.

[Dylan]

Great! So far this all worked. I would love to have sticky on both menus. Main menu, and the secondary. If you get what I mean. So maybe, under the mobile main menu have a few other links.

[David]

Couple of things first:

1. Disable Sticky navigation – we’ll use CSS to fix them both, but there will be no transition.
2. I would suggest enabling the Mobile Header so it occupies less vertical space. Currently your at risk of half the screen being covered by site header and secondary nav on small devices.

[Dylan]

I’ve done both! 🙂

[David]

Try this CSS:

.main-navigation, .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
}
.main-navigation {
    top: 0;
}
.secondary-navigation {
    top: 120px;
}

[Author]

Posts