Menu icon Foundation
Offcanvas close-for-screensize classes

I'm working on a site design where I want my primary navigation and additional elements on the offcanvas panel for small screens. Then on the medium up I want the menu to appear in the top-bar and other elements to appear elsewhere on the page.

I duplicated the menu once in the top-menu and once in the offcanvas container.

If the user has scaled the window down to mobile and then they slide open the offcanvas they see the navigation and additional elements. Then if they scale the browser window wider they see both the top-nav and the offcanvas.

It would be ideal if as they scaled their browser window wider if I could say close-for-medium-up and the offcanvas would automatically close.

Site example

feature requestoffcanvas

I'm working on a site design where I want my primary navigation and additional elements on the offcanvas panel for small screens. Then on the medium up I want the menu to appear in the top-bar and other elements to appear elsewhere on the page.

I duplicated the menu once in the top-menu and once in the offcanvas container.

If the user has scaled the window down to mobile and then they slide open the offcanvas they see the navigation and additional elements. Then if they scale the browser window wider they see both the top-nav and the offcanvas.

It would be ideal if as they scaled their browser window wider if I could say close-for-medium-up and the offcanvas would automatically close.

Site example
Karl Ward over 5 years ago

When you say "automatically close", do you mean have the off-canvas menu removed or have it collapsed but still accessible by button? If the menu has been opened, there is no native method to auto-collapse the menu on-window-resize ... You could achieve it by some basic javascript.

Ethan Hackett over 5 years ago

I envisioned having it stay on the page but collapse. This way if the user wanted to hide the button they could use hide-for-screensize. Maybe the class hide-for-screensize would work for toggling the offscreen. This way, with a combination of hide-for-screensize and close-for-screensize the offcanvas functionality would be available for limited screen sizes.

Karl Ward over 5 years ago

I am not sure why you would need to collapse the menu on window resize. The off-canvas menu always starts collapsed, until it is opened by the user, regardless of screen size. Why would you need to collapse it for smaller screens if it is already collapsed on smaller screens?

I am not quite sure why you are spending time trying to "close" the window "when user scaled their browser window wider". It is not normal to be scaling your browser window, and besides, if they did open the menu earlier, they can just close it themselves which is very intuitive.

If you want to hide or show the menus based on screen size, that is another story ... But collapse-on-resize? I can't see what difference that makes, as the menu is always collapsed, unless user opened it.

Ethan Hackett over 5 years ago

Yeah I think the use case is pretty small. It's more my wanting to going the extra step in the off chance that the user is using the site with their browser in a thin view then opens the navigation then while the off canvas is opened makes the window wider. I want it to auto close since the off canvas is a mobile specific feature.

I probably experience it more since I'm working on the site and constantly scaling the window size to test views. Then I keep thinking to myself "why is that off canvas showing, my browser is quite wide."

Robin Cox over 5 years ago

Add this to your app.js file:

$(window).resize(function() {
    if(window.innerWidth < 641) { $(".off-canvas-wrap").removeClass("move-right"); }
}

In this example the offcanvas collapses when the screen width (viewport to be more exact) becomes wider than 640 px.

What triggers the off canvas menu to slide out is that a class of "move-right" is added to it. By removing the class, it collapses.