Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 9, 2017 at 2:48 pm #836435
    Picante

    Hello

    I have raised this issue several times now and whilst I have had several responses the issue has not been resolved and the menu is still overlapping on laptop sized screens (see screenshot below).

    Can someone please help?!

    Many thanks

    August 10, 2017 at 7:48 am #836797
    Rikard

    Hey Picante,

    It would be a good idea to not open new topics for the same problem, if you do so we don’t know what has been suggested to you before.

    Please try this in Quick CSS to activate the mobile menu earlier:

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

    Best regards,
    Rikard

    August 11, 2017 at 2:11 pm #837458
    Picante

    Thanks Rikard – that has now worked on smaller screens :-) but I now have the mobile menu stuck at the end of the full menu on the desktop version – see home page. How do I remove this?

    August 12, 2017 at 1:14 pm #837847
    Rikard

    Hi,

    Did you try to lower the pixel value in the code? Like this for instance:

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

    Best regards,
    Rikard

    August 12, 2017 at 1:48 pm #837869
    Picante

    Have tried that – it makes no difference :(

    August 12, 2017 at 2:45 pm #837901
    Victoria

    Hi Picante,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look? Did you update the them to 4.1.2? Which menu do you want on desktop? Burger or normal?

    Best regards,
    Victoria

    August 14, 2017 at 10:35 am #838526
    Picante

    Hello

    I have just updated the theme which has sorted that issue – thank you! BUT now the burger menu has disappeared on smaller screens!

    I have changed the colour in “burger/mobile menu styling” to the colour I want but it’s not showing at all.

    I’ve copied the css I’m using below (in case anything is conflicting).

    Many thanks.

    August 14, 2017 at 3:55 pm #838717
    Victoria

    Hi Picante,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (max-width: 767px) {
  nav.main_menu {
    display: block !important; 
  }
  .responsive .logo img {
    width: 50%;
    padding: 15px 0;
    max-height: initial;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 14, 2017 at 4:06 pm #838725
    Picante

    Now I have the mobile menu as required but it has gone back to overlapping on a laptop sized screen.

    So – the menu is working correctly on desktop, tablet and phone but not on a laptop sized screen, so back to my original request – how do I get the mobile menu to show on a laptop sized screen?

    What I want is the menu to show as follows:

    Desktop – full sized normal menu.
    Laptop, tablet and phone – mobile menu.

    Many thanks

    August 14, 2017 at 5:20 pm #838804
    Victoria

    Hi Picante,

    The code I gave you does not affect the desktop size. Could you please clear the cache, check again and get back to us. Which screen size is not working for you?
    The menu has to switch to burger at 1320px, there is no room for it next to logo, or you can have logo full width below the logo.

    Best regards,
    Victoria

    August 15, 2017 at 10:11 am #839150
    Picante

    The desktop works fine and the tablet and phone convert to the mobile menu which is fine. The laptop size is the one which is overlapping and I would like it to convert to the mobile/burger menu.

    Many thanks

    August 18, 2017 at 6:48 am #840757
    Ismael

    Hi,

    Please go to the Enfold > Main Menu > General panel. Set the “Menu Items for mobile” to the second option then add the CSS code to force the mobile menu to display when the screen width is less than 1600px.

    @media only screen and (max-width: 1600px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}

    What is the screen resolution of the laptop?

    Best regards,
    Ismael

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