Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 14, 2017 at 9:19 am #838497
    schoenj

    Hi there,
    I’ve a problem with the menu on mobile devices.
    I know it’s an problem you guys working on, but anyway I hope you have a solution.
    The site: http://www.gemar.nl/
    Thanks,
    Regards, Jeroen

    August 14, 2017 at 2:27 pm #838661
    Victoria

    Hey Jeroen,

    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 screen and (min-width: 300px) and (max-width: 767px) {
  nav.main_menu {
    display: block !important; 
  }
  .responsive .logo img {
    width: 80%;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 14, 2017 at 8:04 pm #838923
    schoenj

    Hi Victoria,

    this works fine thanks.
    However 2 other problems comes in place… when you reduce the size of the page (from big screen to iPad-screen to mobile and vise versa), then you see 2 problems:
    1) the menu items go behind the logo
    2) When you go back (from mobile to big screen), the logo is stretching out.
    Any suggestions?

    Regards, Jeroen

    August 15, 2017 at 9:32 am #839131
    schoenj

    Hi Victoria,

    One problem has been resolved, but we still have 2 other issues

    1) The menu items go behind the logo.
    2) If you look on your mobile you will see the menus, but not the submenus.

    Any suggestions?

    Regards Jeroen.

    August 15, 2017 at 5:00 pm #839412
    Victoria

    Hi Jeroen,

    The issue was described for mobile devices, I did not look at tablets. You need to have the menu switch to burger at 1000px screen size. Here is how to do it.

    This 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 (min-width: 1001px) and (max-width: 1100px) {
  .av-main-nav > li > a {
    padding: 0px 4px;
  }
}

@media only screen and (min-width: 1110px) {
  .av-main-nav > li > a {
    padding: 0px 13px;
  }
}
@media only screen and (max-width: 1000px) {
  .menu-item {
    display: none;
  }
  .av-burger-menu-main {
    display: block;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 15, 2017 at 8:34 pm #839563
    schoenj

    Hi Victoria,
    this code fixed the problem of ‘the menu items go behind the logo’ Thanks for you quick answer.
    Unfortunately the other problem stille exists: If you look on your iPhone (mobile) you will see the menus, but not the submenus.
    Any idea?
    Regards, Jeroen

    August 17, 2017 at 4:46 pm #840490
    Victoria

    Hi Jeroen,

    That’s a bug. Here is a thread about it

    Sub Menu do not appear in mobile menu since 4.1

    If you need further assistance please let us know.
    Best regards,
    Victoria

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