Responsive Menus – Header menu to large for IPad and wraps to a new line

[agileWpHappyUser]

Hi,

When I load my site in my ipad the list of menus in the header menu is now to wide for my ipad display (when have my Ipad upright) and so the header menu bar wraps to to lines

Does this theme have some responsive setting I can use for Ipads or mobile so the menu becomes something like a dropdown instead when the menus will not fit on the screen ?

I would be ideal I think if when my site is checked on the ipad and if the header menus will not fit either the font size of them is auto sized smaller or the menu just becomes a dropdown automatically (I think I have seen that on other themes)

cheers
Jonathan

p.s will put site URL and temp login in a private reply to this one

[agileWpHappyUser]

This reply has been marked as private.

[Ernesto]

Hi, I’ve tried your page on an IPad and the menu seems to be turning into a mobile menu withour problem. Is there any specific browser where the problem is presenting?

[agileWpHappyUser]

This reply has been marked as private.

[agileWpHappyUser]

Hi,

Sorry to chase on this one but I have tried on safari on a few iPads now and they all seem the get the problem that the menu does not move to the mobile version

Would you be able to point me at the code that does the check .. so maybe I can make it a bit more sensitive ?

cheers
Jonathan

[Ernesto]

Hi, I tried it on several browsers and I’ve noticed that only when you scroll doen does the mobile menu disappear. You’ll need to enter the Custom CSS Section of your Theme Options Panel and enter the following code:

#mobile-menu {position: fixed}

That should make it show up.

Let us know if you could do it!

[agileWpHappyUser]

🙁 unfortunately it did not seem to make any difference for me (i cleared all caches,etc and could see the new code in the css downloaded.

Damm this is strange isn’t it. Okay I expect this is completely unrelated but maybe it will help a bit in that maybe the large site logo (top left) is causing issues it does seem to take up a few lines on the mobile and so leave a large white space at the top

Is there any way to ensure the site logo does not show when in mobile view ? (as I happy for the site logo not to show on mobile view.

[agileWpHappyUser]

ah I managed to remove the site logo when it is on a resolution less than 900 . That looks better 🙂

Okay my issue is now on my ipad and on Firefox browser (tools > web developer > responsive design view > view setting 768 * 1024 ) the primary menu does not turn into the mobile menu and normal menus are to long and wrap to 2 lines. So is there a way to either..

1/. When resolution is below a certain value …make the horizontal menu padding between items less, and font of menus smaller on so they fit on one line ?

OR

2/. Maybe I have to adjust the resolution setting for when the menu turns into the mobile menu (where is that setting ?)

cheers
Jonathan

[Ernesto]

Hi! I believe I found the solution to your problem. Enter in Custom CSS Section and set the following code:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#primary-menu ul.menu li a {padding: 0 5px 0;}
}

It’ll make the items in the menu have very little padding between them when on IPad resolution.

Let me know if you could achieve this!

[Author]

Posts