-
Hi,
I want to be able to us a different off canvas menu for different pages, posts or categories.
Its easy to set up what menu displays in the off canvas panel for the entire site.
But I want to be able to achieve this:
Page / Post (or category) A > assigns and displays menu A in the off canvas panel
Page / Post (or category) B > assigns and displays menu B in the off canvas panel
Page / Post (or category) C > assigns and displays menu C in the off canvas panel
So that the menu that appears in the off canvas panel changes depending on what page, post or category you are viewing.
How can I do this?
-
Actually I think I figured it out. Don’t assign the off canvas to any menu and leave blank.
Then create an element hook for generate_inside_slideout_navigation, put your menu content in that and configure the display rules, apply custom css.
Is this the best way to do this? Its not displaying any defined menus though, just the code I put in the hook.
How would I do it with widgets in the same scenario?
-
How can I pass the wp_menu info to the element hook for generate_inside_slideout_navigation to get it to display a specific menu?
UPDATE:
Ok so I have figured out how to insert the menus in the hook using this code:
wp_nav_menu( array(
‘menu’ => ‘my menu’, // menu name
‘container’ => false,
‘menu_id’ => ‘my-menu’, // menu id
‘menu_class’ => ‘slideout-menu’,
‘depth’ => 0,
) );So that inserts the menus but if they contain sub menu’s no expand button is shown, how do I get the toggle button to show for sub menu links?
-
Hi there,
You can use this PHP code to swap menus for different locations:
add_filter( 'wp_nav_menu_args', function ( $args ) { // Check if the menu theme location is 'slideout' if ( 'slideout' !== $args['theme_location'] ) { return $args; } // --- Safely determine the appropriate menu --- // Option 1: Using the safe in_category() with quotes // This assumes 'category-a', 'category-b', etc., are the category slugs. if ( in_category( 'category-a' ) || is_category( 'category-a' ) ) { $args['menu'] = 'menu-a'; } elseif ( in_category( 'category-b' ) || is_category( 'category-b' ) ) { $args['menu'] = 'menu-b'; } elseif ( in_category( 'category-c' ) || is_category( 'category-c' ) ) { $args['menu'] = 'menu-c'; } // Note: The is_category() check is added to also catch category archive pages. // If you only want to change the menu on single posts in that category, // remove the || is_category(...) part. return $args; } );Adding PHP: https://docs.generatepress.com/article/adding-php/
-
Hi Thanks for this.
However when I insert menus I always get this error:
Uncaught TypeError: Cannot read properties of null (reading 'getAttribute') at Object.afterClose (offside.min.js?ver=2.5.5:1:4801) at y (offside.min.js?ver=2.5.5:1:2099) at l.close (offside.min.js?ver=2.5.5:1:2421) at HTMLButtonElement.<anonymous> (offside.min.js?ver=2.5.5:1:5519)The menus work but how can I get rid of this error.
-
I don’t think the error is related to the PHP code I provided; it’s a JavaScript front-end error, not a PHP error.
Can you disable all other plugins and disable all other custom functions to test?
Let me know 🙂
-
Hi,
No its not the PHP code you provided.
So how I have it set up is I’ve created an element layout for the entire site where I can disable the (default) site header.
I’ve also created an element hook with with hook name block_head. Inside the element block head hook I have inserted a custom pattern that acts as the header.
So I am able to display bother headers at once or just the custom one by disabling the default header which is what I need as I want the custom header.
That is so when I have that working as intended I can just duplicate the pattern and make adjustments as needed for different parts of the site.
So I’ve added the hamburger shape in the pattern (that is inserted into the block_head) and it works as it should do but produces the JS error in the console that I posted above.
The thing is if I have both headers displayed, the custom one and the default one then both menus work fine with no errors.
Its only when I disable the default one via the layout element and only have the custom one showing that it produces the console error, the menu still works as intended though, I just don’t like errors :).
The code that I have to insert the hamburger icon into the pattern for the header is:
<div class="slideout-toggle has-svg-icon"><a href="#" role="button" aria-label="Open Off-Canvas Panel" aria-expanded="false"><span class="gp-icon pro-menu-bars"> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /> </svg> </span></a></div>Not sure what it is but its strange that it doesn’t happen with the default header present.
The console error is pointing to these parts of the JS code:
at Object.afterClose (offside.min.js?ver=2.5.5:1:4801)
Links to: “true” === document.querySelector(“.main-navigation .menu-toggle”).getAttribute(“aria-expanded”) && document.querySelector(“.main-navigation .menu-toggle”).setAttribute(“aria-expanded”, !1),at y (offside.min.js?ver=2.5.5:1:2099)Links to: i.afterClose())
at l.close (offside.min.js?ver=2.5.5:1:2421)Links to: this.close = function() {
y()
}at HTMLDivElement.<anonymous> (offside.min.js?ver=2.5.5:1:5519)Links to: generateOffside.close()
I think I may have missed including some elements / classes in the pattern header but it does work apart from that console error.
-
I’ve also created an element hook with with hook name block_head. Inside the element block head hook I have inserted a custom pattern that acts as the header.
Do you have GB Pro? If so, you can use GP’s block element – site header and insert GB pro’s Site header block and Navigation block in it. In this case, you can create your custom site header via blocks.
Let me know!
-
No I don’t have GB pro only GP premium.
-
Hi there,
Can you try the method Ying suggested? It’s simpler — no need to create an extra element. Just use the default off-canvas settings. That should avoid the error you’re seeing.
-
Well I haven’t got GB Pro only GP Premium so cannot try what Ying suggested.
Ive been looking at GB Pro and it does look a lot easier to use when customizing the site.
So I have GP Premium.
GP One sounds OK. Wouldn’t use cloud I don’t think but If I signed up for that and decided that I no longer wanted to sub in future I’m aware that support & updates aren’t available without sub but everything implemented since then would work yes?
Also if I stopped the sub (with one) could I switch the license back over to GP pro to get GP Premium updated without it breaking the site, would the pro blocks etc still work?
If I got just GB Blocks Pro alone and stopped the sub, same question as above. I don’t think there would be an issue with just Blocks Pro but might be with GP One?
Thanks
-
Well I haven’t got GB Pro only GP Premium so cannot try what Ying suggested.
Have you tried the method in my initial reply?
https://generate.support/topic/different-off-canvas-menu-for-different-pages/#post-184136And disable your elements.
-
Yea, that worked thanks. It was actually a problem with the slideout menu and JS.
Ive just purchased GB pro so starting again 🙂
-
Great! Hope you will enjoy building the custom header with blocks 🙂
Let us know if you run into any problems!
-
Yea already have lol. See this thread 🙂
-
I’ll close this topic, so we can focus on the new topic 🙂
- You must be logged in to reply to this topic.