Archived topic
Header with navigation in the middle and a button on the right
7 replies · Started by Alicja on March 30, 2022
Hi,
I need to build the header that has a logo on the left side, navigation in the middle, and a button on the right. I tried to make it using the "Layout" element but it is not updating menu items when changed (I used a navigation block for the nav). What is the best way to build it? You can see how it should look here: http://paytonb11.sg-host.com/. As I mention, I've already built it but it needs to be fixed.
Thank you!
Hi Alicja,
You don't need to use layout element or navigation block, just use the default navigation.
1. Go to customizer > layout > primary navigation, set navigation location to float right.
2. Add the button. You can use a block element:
https://docs.generatepress.com/article/block-element-overview/
https://docs.generatepress.com/article/block-element-hook/
Set entire siteas its location, set menu_bar_item as hook name.
Once it's done, come back to us and attach your site link, we will provide custom CSS to center the navigation.
Let me know :)
Thank you Ying! I have added the button and centered the menu but still have some issues:
1. The mobile menu icon is displaying on the desktop view (which I can fix with CSS but I think I did something in the wrong way).
2. There is no button in the mobile menu.
Everything other than that works well. Could you please help me fix it?
Thank you,
Alicja
Can you link me to your site?
Hi Alicja,
1. Kindly go to Appearance > Customize > Layout > Off Canvas Panel and set it to display on Mobile only: https://share.getcloudapp.com/6quZrPGm
2. Where do you want it placed on mobile? Do you want to place it somewhere inside your off canvas menu or beside the hamburger button?
Hope to hear from you soon. :)
Hi Fernando, thank you for helping. I think I will put the button outside the menu, but I know how to do it so everything is solved :) Thank you!
You’re welcome Alicja! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)
