- This topic has 5 replies, 2 voices, and was last updated 1 month, 2 weeks ago by
.
-
Posts
-
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.
Customer Support
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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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/Kqww1NKBasically, 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_itemsAny content within will appear beside the cart on desktop and also beside the cart and hamburger on mobile.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Excellent! Wokrs perfect. Thank you David.
Awesome – glad to hear that!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.