[Resolved] Off canvas menu

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?

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.

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' : '',
			);
}
);

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

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.

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

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;
}
}