-
Hi. We have a site using GP & GB. The main portion of the site has a pretty standard menu, and uses the “hamburger” menu for mobile. Everything with that works fine.
Now, we have created a sub-site within the main site that essentially has a different theme. Header and footer are emulated by suppressing the normal header and footer and replacing the with GP Elements. What I am looking to do if possible is to somehow use the menu system to create an alternative hamburger menu, same style as the main one but with a different WP menu assigned. Is there a way to do that?
-
Hi there,
you can use the
wp_nav_menu_argshook to swap themenuFor example:
add_filter( 'wp_nav_menu_args', function ( $args ) { // if the menu is the primary menu && is a single post if ( 'primary' === $args['theme_location'] && is_single() ) { $args['menu'] = 'My Single post menu'; } return $args; } );In that example we are checking if were viewing a single post – just need to change that for a condition that meets your needs and update the
$args['menu']to match the name of the menu you to swap in.Let me know.
-
Outstanding! I knew there would be a way to hook that in there. Thanks a bunch!
-
…oh, but wait: If I am suppressing the main header in this scenario, how will the menu get called/placed?
-
So you could use the
option_generate_settingshook to relocate the navigation:https://docs.generatepress.com/article/option_generate_settings/#options-‘nav_position_setting’
Or an alternative … you could use the Secondary Navigation and set its Location Above the Header.
Then use a Layout Element to disable the Secondary Nav everywhere except the pages you want it.Would that work ?
-
Hmm, I’m getting closer with the secondary navigation. Two problems though:
1. How to best get the logo to display in the upper left? Should I just do a “position: absolute” on a logo image? Or is there a hook that would allow me to insert that in the correct spot?
2. The hamburger icon displays centered. I have the Navigation Alignment and Dropdown Direction set to Right, but it doesn’t seem to impact its location. The Navigation Location is set to Above Header, when I set it to Float Right the whole thing disappears entirely.
-
1. We’ll likely need CSS for this. Can you share the link to where we can see the secondary nav activate? We’ll assess what needs to be done.
2. We’ll see what needs to be done here after we see your setup as well.
-
For #1, you can try link: https://dev.acornfinance.dev/contractors-new-design/, but I’m having trouble getting the secondary navigation working on that page so you might not see it. You can log into an administrator account using the details in the private section of this message.
For #2, I was able to resolve it this way:
media (max-width: 767px) { button.secondary-menu-toggle { position: absolute; top: 0; right: 0; } } -
I’ve discovered that the CSS solution above for #2 doesn’t work in all cases. How can I display the mobile menu toggle button to the right edge?
-
Looking at the site – quick question – why not keep the site header in view on your entire site, and then simply swap the menu as i proposed here:
https://generate.support/topic/secondary-theme-mobile-menu/#post-5817
-
Oh…guess I didn’t realize it would work that way. I’ll give it a try.
-
Ok 🙂 Let us know
-
Worked like a champ! Thanks!
-
Closing…
-
Glad to hear that!
- You must be logged in to reply to this topic.