Ipad mini has no menu

I’ve realized that this template does not render well on the ipad mini in portrait. The biggest issue being that no menu is displayed. Is there a fix for this?

Hello there,

The menu is displayed as well when it on ipad mini or another devices.
When your site is displayed on mobile device, the menu is automatically replaced by the hamburger menu and it has white color.

Is you site has white color on the header area? could you please to post the URL of your site?

Hey Awan & Monty,

Mine is doing the same on my ipad and also iphone… Yes the menu header is white! Can we amend the “hamburger” colour for mobile devices so that it is black in contrast?

I was trying to find if this was an option when setting the colour choices in customise but can’t find it. Need to keep menu white as my logo/title are black :slight_smile:

Here’s my site: www.ownit.life

Thanks,

Rachel

Awan - My hamburger menus is dark and it appears on all screen sizes except for the ipad mini portrait. It’s there in landscape… my site is jillskridulis.net

Rachel - I used this custom css to change the color…

.btn-menu {
color: #996482!important;
}

Thanks Monty - I was having some issues with the landscape view on my ipad mini as well. I’ll try that code for the hamburger menu colour and let you know if same issue or resolved :slight_smile:

Thanks chaps!

Rachel

Thank you that’s fixed it Monty :slight_smile:

Hi @Monty,

I’ve checking your site and looks like the button menu are not displayed in iPad mini is because your custom css code.

Did you add those custom css code to make the button menu displays horizontal aligned with the logo when its displayed in iPhone?

Please remove your custom code and try these code instead:

@media only screen and (max-width: 767px){
  .btn-menu {
    float: right;
    margin: -40px 15px 0 0;
  }

  #mainnav-mobi {
    top: 20px;
  }
}

@media only screen and (max-width: 1024px){
  .btn-menu {
    margin-top: 25px;
  }
}

Regards,
Awan

That puts the menu back on the ipad mini, but now it’s messed up on the iphone.

Hi,

I think there is something missing from the code on above. Please try these code below instead:

@media only screen and (max-width: 767px){
  .btn-menu {
    float: right;
    margin: -40px 15px 0 0 !important;
  }

  #mainnav-mobi {
    top: 20px !important;
  }
}

@media only screen and (max-width: 1024px){
  .btn-menu {
    margin-top: 25px;
  }
  #mainnav-mobi {
    top: 80px;
  }
}