Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 8, 2019 at 4:40 pm #1116722
    hvermeer

    Hello,

    I am developing an website but I’ve noticed that the menu doesn’t display as a hamburgermenu on iPad. Therefore it runs into the logo.
    Also on iPad and mobile the WPML language switch flags are visible in the header. I don’t want that. Ecpecially on mobile it overflows the logo. It would be nice if it is possible when you click on the hamburger menu the flags are shown. I don’t know if this is possible?

    The URL of the website I am developing is: https://www.zibo.remarkabletest.nl

    Can you help me?

    Sanne

    July 9, 2019 at 8:00 am #1116941
    Rikard

    Hi Sanne,

    Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    July 9, 2019 at 10:38 am #1117000
    hvermeer

    Hi Rikard,

    Thank you for replying and the CSS code. I’va added this to the Quick CSS and it works great for the hamburger menu. :)

    The other thing I am struggling with is that the WPML lang switch flags are running into the logo on the mobile version (see screenshot at: https://www.zibo.remarkabletest.nl/wp-content/uploads/2019/07/Screenshot_20190709_103442_com.android.chrome.jpg).

    Do you know how to fix this?

    Best regards,
    Sanne

    July 11, 2019 at 3:47 am #1117648
    Ismael

    Hi,

    Thank you for the update.

    You can get around that issue by decreasing the size of the logo and adjusting the padding between the language switcher. 

    @media only screen and (max-width:767px) {
    .responsive .logo img {
        max-height: 40px !important;
    }

   .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
       padding: 0 0 0 13px;
   }
}

    Let us know if that helps.

    Best regards,
    Ismael

    July 11, 2019 at 11:31 am #1117754
    hvermeer

    Hi Ismael,

    Thank you for the code. It worked.
    I’ve tweaked the code a little bit. Set the max-height to 30px.
    Thank you!

    Best regards,
    Sanne

    July 11, 2019 at 12:52 pm #1117771
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile menu missing on iPad and WPML lang switch displays wrong on mobile’ is closed to new replies.