Shape 5

Joomla Templates => Newsplace - Club => : waltmayo April 07, 2014, 06:36:15 AM



: Broken Menu in ipad/tablet mode
: waltmayo April 07, 2014, 06:36:15 AM
Love the template, but the menu "breaks" and drops down below the menu bar when viewed on iPads. This even shows up on the shape5.com demo of Newsplace... just click the responsive icon at the top to view the template in tablet portrait and this is what you get:

https://onedrive.live.com/redir?resid=693F7D2424A4BD9F!15847&authkey=!ADBUfu8FaVsW9hM&v=3&ithint=photo%2c.jpg

Help!

Walt


: Re: Broken Menu in ipad/tablet mode
: mikenicoll April 08, 2014, 12:07:16 AM
Hello,

This happens because the available width on the menu bar is not enough to contain the menu items at that width. I do see the issue on our demo and forwarded that to our developer but the solution would be to either;

a) decrease the total amount of menu items to allot for more width on smaller resolutions
b) decrease the overall font size or padding
c) add responsive css to auto adjust the font size and padding at different resolutions.

I will let you know once this is updated.

-Mike


: Re: Broken Menu in ipad/tablet mode
: marleyman August 13, 2015, 07:09:41 AM
Mike,
I need the fix for this exact menu problem on ipads.
Your demo of Newsplace still breaks the menu on an ipad so am I to assume you guys have yet to fix this issue?

I have reduced my menu items as much as I can and I really need this site's menu to render correctly (on one line) for users that are viewing it with ipads.

Can you please either give me updated CSS files or give me exact instructions on how to fix this issue?

thank you!


: Re: Broken Menu in ipad/tablet mode
: mikenicoll August 14, 2015, 01:10:19 AM
Hello,

Removing this line fixed the menu dropping down on our demo. Your results may vary based on how many menu items you have on the same line. Only option is really to reduce the font size, padding or amount of menu items.

:
s5_flex_menu.css - line 141

#s5_nav li.mainParentBtn .s5_level1_span2 {
    padding-right: 16px;
}

You could also swap to the mobile menu sooner by modifying the first line of s5_responsive_bars.css

Regards,