Mobile Navigation from device-lg

1 reply · opened Jul 26, 2021

MmediakonzeptJul 26, 2021

Hi Support Team
i can see that the mobile Navigation (primary-menu-trigger) will change at screen-wide "device-md"...i need it already from device-lg because we have to much navigation points...
i changed line 640 at functions.js and add the device-lg class but it will not work

can you help me

thx, Felix from Switzerland

SSemicolon WebSTAFFJul 26, 2021

Hello,

Having a Mobile Menu at 1200px is Definitely Possible but there is a fair bit of Customization required to achieve this:

  1. In the style.css File, you will need to change all the Media Queries that includes the #header,#primary-menu and other Header Elements from @media (min-width: 992px) to @media (min-width: 1200px) and from @media (max-width: 991.98px) to @media (max-width: 1199.98px).

  2. In the js/functions.js File, you will need to change all the following codes targeting the Headers and Primary Menus:
    [ch_pre type="js"]$body.hasClass('device-xl') || $body.hasClass('device-lg')[/ch_pre]

to:
[ch_pre type="js"]$body.hasClass('device-xl')[/ch_pre]

and:
[ch_pre type="js"]$body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')[/ch_pre]

to:
[ch_pre type="js"]$body.hasClass('device-lg') || $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')[/ch_pre]

That's all. This should definitely work fine. We are already working on making this much more easier and this feature will be available in the next major version of Canvas. 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
Mobile Navigation from device-lg · Canvas Template Support