RRoteemyMay 24, 2021
I can see that all your menus show mobile version on sm,md, maybe lg too, and desktop menu only lg or xl... I don't know the class that's responsible for Menu responsiveness.
Responsive Menu
6 replies · opened May 24, 2021
SSemicolon WebSTAFFMay 24, 2021
Hello,
Currently Responsive Menus are activated on Devices below 992px (no classes are used for this). Having a Mobile Menu at different breakpoints is definitely possible but there is a fair bit of Customization required to achieve this:
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).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]
This should definitely work fine. We are working on making this much more easier in the coming updates and will send you an email Notification once this is available. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
RRoteemyMay 25, 2021
I did not indicate what I want to do, but I got your explanations... I think that is unecessary steps since you are using bootsrap.
I want to make desktop menu to appear from md and above and mobile menu on sm, xs
RRoteemyMay 25, 2021
Fixed... thanks
SSemicolon WebSTAFFMay 25, 2021
Hello,
Our Menus are more powerful and customizable that the default Bootstrap Menus. So it does not work on Bootstrap which is why there are extra steps. We are working on making this more flexible and easier to change in the future updates.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
RRoteemyMay 25, 2021
Yeah... I know your menu is more Advance... But Bootstrap classes can make things easier.. I've used Bootstrap classes to manage responsiveness on various devices without messing with the design.
Thank you.
SSemicolon WebSTAFFMay 25, 2021
Hello,
Completely agree with you. As mentioned we are already on a better way to handle this and we will send you an Email Notification once this is available. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
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