Change width at which navbar collapses?

1 reply · opened Mar 7, 2017

FfranklinveauxMar 7, 2017

By default, the navbar in Canvas pages will collapse to the "mobile" menu if the page is narrower than 992 pixels. I'd like to change that to a more reasonable value, like 768.

Changing this value in the @media queries in responsive.css works, except that the sticky navbar breaks.

What is the correct way to set at what width the navbar collapses?

SSemicolon WebSTAFFMar 22, 2017

Hello,

Along with change the @media Query in css/responsive.css File, you will also need to find the following code in the js/functions.js File inside the stickyMenu: function( headerOffset ) Function Block:

if( $body.hasClass('device-lg') || $body.hasClass('device-md') )

and replace it with:

if( $body.hasClass('device-lg') || $body.hasClass('device-md') || $body.hasClass('device-sm') )

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Change width at which navbar collapses? · Canvas Template Support