[Resolved] Off Canvas Toggle Button in Primary Navigation

[Manja]

I would like to hook the Off Canvas Toggle into the Primary Navigation and then conditionally display it only on WooCommerce pages. But how do I address the Off Canvas Toggle?

Thanks
Manja

[David]

Hi there,

a real simple solution is to add this CSS:

body:not(.woocommerce) .main-navigation .menu-bar-item.slideout-toggle {
    display: none;
}

Then enable the Off Canvas panel in the customizer.
The CSS will hide it on any non-Woocommerce page.

Let us know if thats ok, or it needs more customization.

[Manja]

Yes, but it should be displayed to the left of the Mini Cart. Thought the moving goes smartly about the hook elements.

[David]

Try this CSS to reset the order, as its HTML should be before the cart:

.main-navigation.has-branding .menu-toggle {
    order: unset !important;
}

if that doesn’t work, can i see your site ?

[Manja]

Thanks, but I fear I changed already too much 🙂 so it didn’t work. Since I have only 2 elements and they are flexed, I reversed the flex-direction. Now it is on the left.

.main-navigation .menu-bar-items {
  flex-direction: row-reverse;
}

Thanks for your thoughts on this!

[David]

Ok, that method is ok to use 🙂

[Author]

Posts