Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1321813

    Hi,

    I’m having some trouble with the mobile menu on tablets. The menu is overlapping the logo when the tablet is horizontal. I added the following code but the menu seems to create white space/ no menu icon. between the desktop and mobile menu. I have included a screenshot of the issue. Ideally I would like the mobile menu to kick in on all tablets without the white space/ no menu icon.

    @media only screen and (max-width: 1200px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    Any help would be a life saver!

    Thanks

    • This topic was modified 1 month ago by  Stretchspot.
    #1322022

    Hey Stretchspot,

    Thank you for the inquiry.

    The mobile menu markup has changed in a bit in the later versions of the theme. You will have to adjust the css code a bit.

    media only screen and (max-width: 1200px) {
    nav.main_menu li:not(.av-burger-menu-main, .av-active-burger-items) {
        display: none;
    }
    
    .av-burger-menu-main {
        display: block;
    }
    }
    

    This should adjust the breakpoint of the menu.

    Best regards,
    Ismael

    #1322069

    Thanks,

    I added the code but it is still overlapping on my ipad. I even changed it to 1400 px.

    Please advise

    #1322145

    Hi,

    Thank you for the update.

    Did you toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code? Please also make sure to purge the cache and remove the browser history, or try to check the site on incognito mode.

    Best regards,
    Ismael

    #1322225

    Under the enfold settings I do not have any active file compressions. I have purged my cache on on wordpress and the server. When I test on a new device the error still shows.

    #1322320

    Hi,

    Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    #1322530

    Login provided in private content

    #1322699

    Hi,

    Thanks for that. The CSS is not applying from the Quick CSS box for some reason, so I added this to the WordPress customiser:

    @media only screen and (max-width: 1100px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }

    And it’s applying to your site now. Please try deactivating your caching plugins if you want to find out why it’s not applying from Quick CSS.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.