Archived topic
2 menus in the same header row
5 replies · Started by _blank on June 24, 2022
Hello,
I would like to ask you how can I position two sepparate menus (primary & secondary menu) in the same header row.
What I am trying to achieve is to have a logo on the left, primary menu in the center and then the secondary menu on the right.
Any help is much appreciated.
Hi there,
quick question - is there any specific need to have 2 separate menus ? As it would be possible on desktop to make split a single menu into two using some CSS?
Let me know
Well when I think about it, there is really a need for only one menu.
On the image below, you can see what I am trying to achieve.
https://ibb.co/Kqww1NK
Basically, it is the logo on the left, menu links in the center of the header and then menu icons (cart, account) on the right.
However I don't know how I could split the menu so that the menu links would be precisely in the center of the header, while menu icons (cart, account) would stay on the right side of the header.
OK - thats good as it means there won't be 2 x menus on the mobile device :)
Add this CSS:
@media(min-width: 769px) {
.main-navigation {
flex: 1;
}
.main-navigation .main-nav {
margin: auto;
}
}The menu will be centred between the Logo and the Menu Bar Items where the Cart Icon would positioned.
If you want to add other icons beside the Cart then you can use a Block Element:
https://docs.generatepress.com/article/block-element-hook/
And set the Hook to: menu_bar_items
Any content within will appear beside the cart on desktop and also beside the cart and hamburger on mobile.
Excellent! Wokrs perfect. Thank you David.
Awesome - glad to hear that!
