Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 25, 2021 at 2:11 am #1302110
    Donkies11

    Hello Support,

    How do I get the Enfold theme to load a mobile (burger) menu for iPads when they are in landscape mode as well?

    I’ve searched through the forum and did not find an answer.

    The site I am working on is: https://www.marshallhallridingacademy.com/

    ~ Greg

    P.S. this is for the main menu gw

    May 25, 2021 at 7:31 am #1302150
    Nikko

    Hi Greg,

    You can load the burger menu for ipads in landscape with this code (add it in Enfold > General Styling > Quick CSS):

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

  .responsive #top #header .av-main-nav .av-burger-menu-main {
    display: none;
  }
}

    Best regards,
    Nikko

    May 25, 2021 at 9:35 pm #1302310
    Donkies11

    Hello Nikko,

    The suggested code above hides the menu – and didn’t change things for iPads held in landscape display.

    I removed the code since it makes navigating impossible with an ipad and they have some live campaigns.

    Should I move this to a dev site for experimentation?

    ~ Greg

    May 27, 2021 at 4:55 am #1302493
    Nikko

    Hi Greg,

    Yes, please setup a dev site for it.
    Are you perhaps using iPad Pro?

    Best regards,
    Nikko

    June 2, 2021 at 1:41 am #1303484
    Donkies11

    Hello Nikko,

    Sorry – took me a bit to get back to this.

    A dev site is now set-up:
    https://ipad.marshallhallridingacademy.com

    I’ve placed the ADMIN credentials in private content area.

    Standing by,
    Greg

    P.S. main concern is to have the mobile menu load for iPads in landscape mode. gw

    June 3, 2021 at 1:56 am #1303673
    Donkies11

    hello Nikko/support,

    just making sure this is on the radar since i dropped off for a few days…

    ~ Greg

    June 3, 2021 at 9:27 am #1303719
    Nikko

    Hi Greg,

    Thanks for providing a dev site, I have added this CSS code in Enfold > General Styling > Quick CSS:

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

  .html_header_top .av_bottom_nav_header .av-logo-container .main_menu,
  .responsive #top #header .av-main-nav .av-burger-menu-main {
    display: block;
  }

  .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 118px;
  }

  #top #header .avia-menu .av-main-nav > li > a {
    height:  118px;
    line-height: 118px; 
  }
}

    Please review your site. :)

    Best regards,
    Nikko

    June 3, 2021 at 10:24 pm #1303892
    Donkies11

    That did it! Thank you, Nikko :-)

    This ticket can be closed.

    ~ greg

    June 4, 2021 at 1:06 am #1303901
    Nikko

    Hi Greg,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘mobile menu for iPad in landscape mode also’ is closed to new replies.