Forum Support

Shape 5
March 29, 2024, 09:47:13 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Broken Menu in ipad/tablet mode  (Read 979 times)
waltmayo
Jr. Member
**
Offline Offline

Posts: 14



« on: 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
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: 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
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
marleyman
Jr. Member
**
Offline Offline

Posts: 171



« Reply #2 on: 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!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: 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.

Code:
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,
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.