Archived topic
Help with header + nav design + mobile header
1 reply · Started by Victoria on February 16, 2022
Hi there,
I'm currently moving our charity website over from Beaver Builder to GP. The first step is to get the header and footer designed and we will then slowly re-design each page with blocks.
Here is the original site: https://rafikimwema.com/
New one on GP: https://rafikimwemastg.wpengine.com/
Here is what I've done:
- Used Elements to add hook for transparent header - Merge on desktop only. This works great.
- Added Off canvas menu for dropdown menu since there are quite a few things there and I like that we can add other things here as well
- Used Example 6 from here https://docs.generatepress.com/article/header-examples/ - "Logo left, navigation in the center and some icons or other items on the right." For this I have to use "Use navigation as header" which then throws out the buttons I'd like to use for "Donate" and the Off canvas prompt "How you can help"
- Used Elements for hook for button in header right items (this is ugly currently).
What I'd like to do:
1. Keep using this Example 6 menu with logo left, nav middle and buttons to the right on desktop
2. Have the Off canvas prompt (How you can help) as a button listed before the Donate button and without the hamburger menu, see no 3:
3. Create buttons for "Donate" and "How you can help" that look like the buttons on the old Beaver Builder site: https://rafikimwema.com/
4. Have a mobile menu like the old site, black background and hamburger menu with all the items from the desktop header nav (so nav items plus buttons)
Is this doable? Or do I have to use a different header, one that does not need "Use nav as header"?
Have I gone about this in the right way? There are so many options, in Customizer, Elements etc that I am a bit confused.
Thank you for any help!
Hi Victoria,
1-2. This is a bit tricky to achieve. You would need custom code or a workaround to achieve having an off canvas menu that works along with a normal menu on all platforms.
3. If you’re adding these through a Block Element with Element type Hook and hook name “menu_bar_items”, you may modify the Block spacing and color settings to achieve this.
See this for reference: https://share.getcloudapp.com/kpu4GJr9
Also see: https://share.getcloudapp.com/04uLwEDe
4. As mentioned, you would probably need custom code or a workaround to do this. All the menu items in the original site are in one menu whereas your new site utilizes two menus. Specifically, the main menu and the off canvas menu. You would need custom code to achieve merging these two menus on tablet and mobile.
One route/workaround would be to set the primary menu and off canvas menu to display on desktop, and then hide these and use a secondary menu instead on mobile. Then use custom CSS to modify the look. Or hook the two buttons via this: https://developer.wordpress.org/reference/hooks/wp_nav_menu_items/
Another route is to with the structure you have is to hook menu items to the primary menu (the two buttons) and display them on mobile only via PHP code.
Another path I see this could work is to add two the buttons through a Block Element via menu_bar_items, and add JS code that will make a section(off-canvas element) appear. Then you can set a unique menu which includes all these buttons for off-canvas on mobile only.
Moreover, Upwork.com and Freelancer.com are two websites you may also go to for assistance if you’re not comfortable adding the code by yourself. Be weary of you choose this route as choosing someone not knowledgeable or trustworthy might break your site. We also don’t guarantee outside services.
Another place you may go to is our official Facebook Group: https://www.facebook.com/groups/generatepress.
Hope this helps! :)
