Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 21, 2021 at 6:43 pm #1321813
    Stretchspot

    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 3 years, 2 months ago by Stretchspot.
    September 23, 2021 at 1:46 pm #1322022
    Ismael

    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

    September 23, 2021 at 6:02 pm #1322069
    Stretchspot

    Thanks,

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

    Please advise

    September 24, 2021 at 7:37 am #1322145
    Ismael

    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

    September 24, 2021 at 5:48 pm #1322225
    Stretchspot

    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.

    September 26, 2021 at 6:02 am #1322320
    Rikard

    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

    September 27, 2021 at 5:20 pm #1322530
    Stretchspot

    Login provided in private content

    September 29, 2021 at 4:35 am #1322699
    Rikard

    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

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