Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #1323561

    Hey 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,
    Ismael

    #1323590

    hi 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.

    #1323727

    Hi,

    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,
    Ismael

    #1323745

    Thank 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,
    Karin

    #1323847

    Hi,

    Ah yes, I didn’t notice that the site is based on a demo. Please keep the css modifications for now. It only contains a few lines of css code, which should not affect the site negatively.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.