Off Canvas Filter

[Ash]

Added off canvas product filter like niche theme. But when active on mobile, the main navigation also opens the filter?

[Leo]

Hi there,

So you don’t want the filter to show on mobile?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

Yes. But view my site in mobile view and then click main menu you will see what I mean.

[Leo]

To hide the filter on mobile, try adding the hide-on-mobile class as a custom CSS class for that widget:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

I know how to hide something that’s not what this post is about.

As I stated main menu is opening filter for some strange reason, view the website in mobile view and click main menu and you will see what I mean.

[Leo]

Do you have a menu assigned to the off canvas panel?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Or am I still missing something?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

Off canvas panel is used as a product filter only, no menu is assigned to it.

I have my menus setup, but once I added the off canvas filter, on mobile devices my main menu now opens that filter for some reason

[David]

Hi there,

the way Niche works is by having the Primary Navigation also located in the Off Canvas Panel with the Woo Widgets.

We then use this CSS to hide the nav in the off canvas for desktop:

@media (min-width: 768px) {
    .slideout-navigation .main-nav {
        display: none;
    }
}

and the HTML used to create the filter toggle has the hide-on-mobile class.

This is the only way you can make off canvas filter widgets work for all devices at this time.

If you want separate menus and separate off canvas filters you will need to add an Off Canvas Plugin

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

That’s a shame, maybe something to look into in the future. It makes sense for an off canvas filter on a mobile device more than desktop, I would just use a sidebar if I only wanted it on desktop. I’ll have to do without have enough plugins already. Thanks

[David]

Yeah – its my fault for making Niche. Off Canvas was never really designed for what we did…. but its on our roadmap to look at other features with it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts