Mobil nav not displaying on iPad

[mark60480]

The collapsed mobile nav icon (three white bars) is displaying fine on the phone, but the iPad (mini) is still displaying the full desktop style menu – and breaking it into two lines because it does not fit. How can I make it display like the phone? Also, I would like to change the white bars to black. Is that possible?

[scrambler]

The mobile menu is triggered by the width of the browser. The threshold value is 768px.

The IPad mini probably has a resolution above that and therefore is treated as a desktop..

If you have the “Plus” plugin, you can use Smart menus and use the threshold box to change at what point the mobile menu kicks in so that it comes up at a higher resolution.

You can also work on the menu items size and spacing so they still fit on one line on the Ipad..

For more detail suggestions and your white bar question, we need a link to your site

[mark60480]

Thanks scrambler! Here’s the link: http://mousetrapmachine.com/new-site/

[scrambler]

1- You could change the font size and / or spacing of menu items on ipad with the rule below in Main options > Fonts & Custom > Custom CSS Rule box

. is-ipad .wvrx-menu a {padding-left:.6em;padding-right:.6em;font-size:.8em !important;}

You can play with larger / bigger value to see what working combination you like best

2- About your white bars, I suppose you mean the separators for the mobile menu (as well as the 3 bars icon I suppose). If so you should remove the border you have set right now, and instead use the rule below in the same Custom CSS Rule box

.is-mobile-menu.menu-arrows a {border:1px solid black;}
.menu-toggle-button {color:black;}

But that will highlight the fact you gradient does not work 🙂

The image used for the gradient has a specific height that does not match the current height of your menu items. So you need to change the height of that image, which you can do with the rule

.menu-primary .wvrx-menu-container {background-size:100% 9.8%;}

Adjusting the second value so that it fits

[mark60480]

Thanks again scrambler!!

[Author]

Posts