Ipad Main menu incompatibility

Hi

Love the theme, it has worked very well for me.

I have a glitch where the width of the main menu works well on desktop, laptop and smartphone but on the ipad the menu runs down to a second line.

This either needs to be resolved by making the menu more responsive (or swipeable) on ipad or create a design where the menu looks great even when it runs down. Presently it looks like a mistake

The theme is set to responsive already so that isn’t the problem.

Do you have any fixes?

Thanks

• This topic was modified 12 years by Dragonola.

Hmmm. On my iPad the menu fits just fine (ga-ga.com test site, under construction). If you add too many elements (more than 7 or 8 menu items, it will break). I think somebody on here removed the search icon, and moved that to sidebar, which provided a bit more room.

Probably an option to have a slide out menu in place of the main menu as a toggle option for the breakpoint would be good.

I’m sure Marius will have a solution to change the breakpoint for the menu for your particular site.

I’m very happy the theme even has a “regular” menu bar for iPad portrait as just about everybody is going with “no menu” and the mobile drop or slide out.

• This reply was modified 12 years by simchris.

Hello,

I have the same problem but in my case, I have also problems with an iPad in landscape mode. I have 9 items + 2 mini logos in my menu and I cannot reduce the items.

I would like to reduce the padding and font size between 768 to 1200 and use the mobile menu for widths below 768px. Could you please help me?

I have a production website and also a test website if you need it. Thank you and best regards!

hi,
please post in this thread the link to your site.

Thanks for you message.
Radu A.

http://www.dietistasnutricionistas.es

Also a two lines menu for smaller screens could be OK also.

Thank you!

Thank you!
Could you please provide me with the CSS code to get this result? I guess that I must reduce the padding + change font height.
And I have no idea how to hide the Home icon on iPad. Could you please help me with it?

I would appreciate the CSS to make the menu smaller too!

Maybe an update in the future could include a design where the ipad version automatically goes to mobile or the design of the menu looks good when forced onto two lines? Many thanks.

hi,
to decrees the size of the menu on desktop use this css:

.td-menu-header ul.sf-menu li a {
  font-size: 13px;
  padding-left: 4px;
}

here: http://screencast.com/t/zpzAGXgV6n

———————
to make the home icon disappear on iPad :

#td-top-menu ul.sf-menu li:first-child{
  display:none ;
}

here: http://screencast.com/t/zbNt4cLcQW

—————-
the mobile menu is showed under 768px : http://screencast.com/t/KSnkUv8WN

Thanks for you message.
Radu A.

• This reply was modified 12 years by Radu A.

Great! Thank you for your help!

There’s one problem with the CSS code. The megamenu does not work when the window is <1200px. You can test the site by yourself.

I have no idea where the problem is. Could you please help me?

Thank you in advance. Best regards.

hi,
I see the problem,
you can try this css.it will only hide from view the home link, but the link is still there. I cound not remove the link and make mega menu to work , sorry about this:

#td-top-menu ul.sf-menu li:first-child a span{
 display:none ;
}

#td-top-menu ul.sf-menu li:first-child a {
  border-bottom-color : #ffffff;
  cursor: default;
}

here: http://screencast.com/t/YdKuPOh3i8

Thanks for you message.
Radu A.

OK. I will leave the home icon. Thank you for your support!

Hi there,

I have the same issue on the iPad. I have tried reducing the font but it makes it to small and also the first load is the normal size before popping into the smaller size.

Could you please provide the css for making the ipad break into the mobile slide out navigation version?

Also I am seeing the loading sprite all the time even when a page is fully loaded. Is there a way to not have this show on iPads? Smart phones works perfectly.

The site is: http://coconutoilpost.com

Many thanks

Peter

Hi Marius,

Thank you that works for the iPad Portrait.

Is there anything that can be done with the page loading sprite which never stops only on the iPad?

Hi Marius,

Thank you I found the plugin causing the issue. It was WP CleanFix which I was using to clean up the database.

Many thanks

I also seem to be having this problem on the iPad. The website is http://thespoilerbox.com. I did attempt the CSS codes but they did not fix the issue. Would this be due to how we have set the menus up? Is there a way to keep them this way and fix the iPad problem?

Screenshot of iPad screen:
http://imgur.com/nJV4B6k

Thanks!