-
AuthorPosts
-
October 4, 2021 at 1:28 pm #1323458
Hello,
I’m using the demo https://kriesi.at/themes/enfold-photography/ and In Theme Options -> Main Menu -> on Menu Items for mobile I’ve chosen Activate for Smartphone and Tablets (browser width below 990px).
However when I check on portrait on a tablet it shows me desktop menu and not hamburger one.
I cleared my cache and checked on other devices but no change.see login details in private settings.
thanks in advance
October 5, 2021 at 4:10 am #1323561Hey karinorage,
Thank you for the inquiry.
What is the actual model of the tablet device that you are using? The mobile menu icon will display when the screen width is less than 991px, but some tablet device is now wider or have a higher screen resolution, so the default menu will still be visible on those devices.
We could use the following css to adjust the mobile menu breakpoint or to force the mobile menu to display when the screen width is less than 1366px, which should cover tablet devices with high screen resolutions such as iPad Pro.
@media only screen and (min-width: 768px) and (max-width: 1366px) .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special { display: block; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none; } }
Best regards,
IsmaelOctober 5, 2021 at 10:00 am #1323590hi Ismael,
Thanks for your reply, I checked on a Galaxy Tablet, but also on several browser tools. Everything bigger that 767 gives the desktop menu, despite the setting of Theme Options -> Main Menu -> Activate for Smartphone and Tablets (browser width below 990px).
In other words this setting should trigger a query, but the query between 990 — 768 doesn’t work.
October 6, 2021 at 10:19 am #1323727Hi,
Thank you for the clarification.
The menu is not switching to mobile mode because you have set the “Logo and Main Menu” to “Left Sidebar”, which only adjusts and reverts back to “Top Header” when the screen width is less than 787px. To adjust the breakpoint, you have to add this css code.
@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header { position: relative; width: 100%; float: none; height: auto; margin: 0 !important; opacity: 1; min-height: 0; } .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left: 0; padding-right: 0; float: none; } .responsive #top .av-main-nav .menu-item { display: none; } .responsive.html_header_left #main { margin-left: 0; } .html_header_sidebar .logo img, .html_header_sidebar .logo svg { width: auto; max-height: 80px; padding: 0; height: auto; } .responsive #header_main .container { height: auto !important; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container { height: 80px; line-height: 80px; } .responsive #header_main .container { height: auto !important; } .responsive #top #wrap_all .main_menu { top: 0; height: 80px; left: auto; right: 0; display: block; position: absolute; } .responsive #top .logo { position: static; display: table; height: 80px !important; float: none; padding: 0; border: none; width: 80%; } .responsive #top .av-main-nav .menu-item-avia-special { display: block; } .responsive.html_header_sidebar #header .av-main-nav > li { margin: 0 10%; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a { min-width: 0; padding: 0 0 0 20px; margin: 0; border-style: none; border-width: 0; } }
Best regards,
IsmaelOctober 6, 2021 at 11:04 am #1323745Thank you, Ismael, that did the trick!
Just one comment – not to be nagging – but, this was a setting I did not make, but is a part of the configuration settings of this demo:It would – however – look much better on (portrait) screens smaller than 990px with an hamburger menu. Is this something that I can submit as a feature request?
For now, thanks for the css code!
Best regards,
KarinOctober 7, 2021 at 7:39 am #1323847 -
AuthorPosts
- You must be logged in to reply to this topic.