[Resolved] Off canvas menu

[fabien]

Hi there,

I am using a plugin to design the off-canvas menu. I have a specific class that opens that menu. How can I apply that class to GP’s off-canvas menu hamburger link?

In other words, I want GP’s native off-canvas and mobile menu links to open “my-awesome-menu-class” custom menu.

[Fernando]

Hi Fabien,

I’m not sure if that’s the best route.

More often, our customers use a plugin, and that plugin has its own hamburger button which is added through a Hook.

If it doesn’t have one, it would be better if you create one. That would be easier to modify.

[fabien]

Hi Fernando, you’re right, however the hamburger button provided via the plugin floating over and awkwardly positioned. The native GP hamburger fits perfectly within the menu whether desktop or mobile. So the best option really would be to have it link to that specific class. Could I perhaps do this with a small CSS snippet?

[Ying]

Hi Fabien,

Try adding this PHP snippet to add class to slideout menu toggle:

add_filter('generate_off_canvas_toggle_output', function(){
	$svg_icon = '<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"></path></svg>';
	$svg_icon_span = '<span class="gp-icon pro-menu-bars">'.$svg_icon.'</span>';
	printf('<span class="menu-bar-item my-awesome-menu-class slideout-toggle hide-on-mobile %2$s"><a href="#">%1$s</a></span>',
				$svg_icon_span,
				$svg_icon ? 'has-svg-icon' : '',
			);
}
);

Adding PHP: https://docs.generatepress.com/article/adding-php/

[fabien]

I added this in the child function.php but I can’t get this to work. I’ve also tried leaving blank under menu positions so it doesn’t show any other menu. no luck

the plugin docs state
If you'd like to use a custom element to activate the menu (a custom menu button, perhaps), you can do so by just giving the element the "jumbo-custom-activator" class. This can be added to a text link, menu button, image etc. You can also hide the default main menu button on the plugin's settings page under Appearance > Customize > Jumbo Plugin.

[Ying]

Oh did you change the my-awesome-menu-class to jumbo-custom-activator in the code?

[fabien]

yes I have in my functions.php exactly this

// REPLACE MENU WITH JUMBO PLUGIN

add_filter('generate_off_canvas_toggle_output', function(){
	$svg_icon = '<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"></path></svg>';
	$svg_icon_span = '<span class="gp-icon pro-menu-bars">'.$svg_icon.'</span>';
	printf('<span class="menu-bar-item jumbo-custom-activator slideout-toggle hide-on-mobile %2$s"><a href="#">%1$s</a></span>',
				$svg_icon_span,
				$svg_icon ? 'has-svg-icon' : '',
			);
}
);

[Ying]

can I see your site?

[fabien]

link in private area. you’ll see the plugin hamburger on the top right hand corner. And the GP native hamburger will appear on the far right of the menu area as you reduce your browser window size and hit the break point

[Ying]

Well, the PHP code only works for the slideout toggle that appears on the desktop, it’s hidden on mobile.
The menu toggle for primary navigation shows on mobile instead.

I tried adding the CSS class to the menu toggle directly in the inspector, but it doesn’t seem to work:
https://www.screencast.com/t/L61TFP4n4Pv

I would recommend showing the video to the plugin support, and checking if they see anything obvious.

[fabien]

Hi again, sorry for the late reply, just been busy but still trying to make this work… Is there not an option to simply target a different class via the GP native hamburger?

I created a dummy text link to test and it works perfectly. I just need to be able to target that class via the GP hamburger.

[David]

Hi there,

Is there not an option to simply target a different class via the GP native hamburger?

No, the buttons scripts are assoiciated with the GP navigation.
The simplest option is to:

1. Create a Block Element – hook:

https://docs.generatepress.com/article/block-element-hook/

2. Set the Hook to menu_bar_items

3. Add your Button with your icon and in Advanced > Additional CSS Classes add your trigger class

4. Set the Display Rules to the Entire Site

[fabien]

thanks David, that sounds easy enough. But I can’t seem to be able to make it work? I’ve tried both custom hooks menu_bar_items and generate_menu_bar_items

[Fernando]

Hi Fabien,

Is the menu_bar_items hook not appearing? If it’s not, you may still be using the Float system. Can you try switching to the Flexbox system?: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

[fabien]

this worked a treat, thank you! Moving to Flexbox however, messed up column arrangement in the mega-menu? How would I go about rearranging these? not sure what impact flexbox would have had?

`/* mega menu */

@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}

nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
}

nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}

nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*=”current-“] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}

nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
}

nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}

[Author]

Posts