8 replies · opened May 16, 2021
Hi!
In my menu-container - 9 menu-item.
I had to increase from @media (min-width: 992px) to @media (min-width: 1290px)
and @media (max-width: 991.98px) to @media (max-width: 1290px)
I have changed files:
bootstrap.css
bootstrap-rtl.css
style.css
style-rtl.css
This did not give the desired result. Now from 992px to 1289px my menu is not displayed.
Where else do I need to make changes?
Hello,
Having a Mobile Menu at 1200px 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.
It worked, but at the resolution from 1200 to 1290 everything is the same.
@media (min-width: 992px) to @media (min-width: 1290px)
and @media (max-width: 991.98px) to @media (max-width: 1289.98px)
I will upload site on the server and send the link
Hello,
Currently you can only change the Media Queries until 1200px for the Mobile Menus as this is linked in the JS Codes and they are according to the Bootstrap Breakpoints. You can certainly change the Media Queries according to your needs but then you will need to use Window Widths in the JS Codes in place of the Classes.
Example:
[ch_pre]$body.hasClass('device-xl') || $body.hasClass('device-lg')[/ch_pre]
will become:
[ch_pre]$(window).width() > 1289[/ch_pre]
This should work fine. Since these codes do not exist by default, any further Customization to this code must be done manually by yourself as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you!
Hello,
Very Happy to Help! :)
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