ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• August 15, 2015 at 12:01 am #204249
  worldlystrategies

  Member

  Post count: 66

  Hi Dante,

  I cannot get my menu to look good on a horizontal iPad. I have tried everything.

  I have tried shortening the words in my menu.
  I have tried using Max Mega Menu Plugin
  I have tried Mobile.Nav Plugin Menu

  Nothing works. Can you please help me get my menu not to hide behind my logo on a horizontal iPad?

  Thank you,
  Worldly Strategies

  Attachments:

  You must be logged in to view attached files.
  August 17, 2015 at 4:15 pm #204648
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  In your case, we could look to trigger the mobile menu for landscape iPad’s.

  Add this to your theme options CSS:

  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
  
  #main-navigation {
      display: none;
  }
  
  a.visible-sm.visible-xs.mobile-menu-show {
      display: block!important;
  }
  
  .header-6 #logo, .header-7 #logo {
      width: 100%;
      padding: 0 15px;
      left: 0;
      height: auto;
      position: relative;
  }
  
  nav.search-nav {
      display: none;
  }
  
  #logo a {
      float: left;
  }
  
  }

  August 18, 2015 at 3:19 pm #205024
  worldlystrategies

  Member

  Post count: 66

  Hi David,

  Thank you for that CSS. Visually it looks great but when I click on the mobile menu hamburger button in landscape mode on an iPad it doesn’t expand or do anything. Can you please let me know how to fix that? Not sure what is happening here.

  August 19, 2015 at 12:21 pm #205313
  David Martin – Support

  Moderator

  Post count: 20834

  Great, yes I see that also.

  I have additionally added this also and that will resolve it:

  @media only screen and (min-width: 992px) {
      #mobile-menu-wrap {
          display: block;
      }
  }

  Thanks,
  David.

  August 19, 2015 at 11:38 pm #205594
  worldlystrategies

  Member

  Post count: 66

  Thank you that worked!

  August 20, 2015 at 11:54 am #205730
  David Martin – Support

  Moderator

  Post count: 20834

  Smashing, no problem.

  – David.

  September 28, 2015 at 9:45 am #216774
  joell-22

  Member

  Post count: 26

  Hello, I have the same problem but the code from above doesn’t help. Do you have an idea how to fix that?
  Thanks in advance.

  Joe

  Attachments:

  You must be logged in to view attached files.
  September 28, 2015 at 10:00 am #216782
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi @joell-22,

  Can you provide your site url?

  -Rui

  September 28, 2015 at 10:24 am #216792
  joell-22

  Member

  Post count: 26

  This reply has been marked as private.
  September 28, 2015 at 10:59 am #216810
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Can you please insert the code again that was provided by David?
  Thanks
  Mohammad

  September 28, 2015 at 11:53 am #216852
  joell-22

  Member

  Post count: 26

  Inserted both codes into the Custom CSS in the Theme Options.

  September 29, 2015 at 9:51 am #217139
  joell-22

  Member

  Post count: 26

  The code is online now. Do you have an idea how to solve that problem?

  October 1, 2015 at 12:46 pm #217835
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  I just forward to Mohammad so he can reply.

  -Rui

  October 9, 2015 at 3:30 pm #219711
  joell-22

  Member

  Post count: 26

  Hi there. When will I get an answer? The project is almost ready.

  October 9, 2015 at 3:47 pm #219717
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Apologize for the delay.

  Guess the only way to show it fine there is to decrease the font size.

  Can you add the code below to your custom css option.

  
  @media (min-width: 992px){
  nav#main-navigation .menu li.menu-item > a {
      font-size: 15px!important;
  }
  }

  Let us know the result.

  -Rui

• Back to forum

  Posted in: Dante