Forum Support

Shape 5
October 18, 2021, 08:17:05 PM *
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: Responsive Menu - Problems with different widths  (Read 302 times)
TejidoSAS
Jr. Member
**
Offline Offline

Posts: 16



« on: May 29, 2014, 11:12:14 AM »

When checking the template with different widths, the following things happen:

240px to 750px activated mobile menu
751px to 949px no menu is not activated
950px to 970px standard menu
971px to 1092px any menu is not activated
1093px to 1100px standard menu
1101px to 1190px any menu is not activated
1191px or higher standard menu

I would like between 971px and 1191px keeps the standard menu, or at least operate at 1024px wide.

I review the previous post and make the suggested changes and do not work

"You have too many menu items. I would suggest consolidating them into less parent level items. The issue is the menu has run out of space on smaller screens so it jumps to the next row, which is hidden because the header has to have a set height. The only css you might able to change is the padding on the menu items to make them smaller, but I still don't think you'll get them small enough for them to always fit. At line 165 of s5_flex_menu.css adjust the left and right paddings under:

#s5_nav li .s5_level1_span1"


and

On mobile devices and tablets the menu switched to the responsive menu instead of the main menu to adapt to a smaller width screen. This effect occurs once the device hits 750px in width. You can change when the responsive menu triggers (and hides the main menu) in the first line of the s5_responsive_bars.css by editing the pixel value here:

@media screen and (max-width: 750px) {


In the picture you can see what happens in different widths



Thank you very much.
« Last Edit: May 29, 2014, 11:18:29 AM by TejidoSAS » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: May 29, 2014, 11:33:36 PM »

Hello,

Can you post a URL so I can see this live?

-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
TejidoSAS
Jr. Member
**
Offline Offline

Posts: 16



« Reply #2 on: May 30, 2014, 07:35:20 AM »

In the image you can see, but:

www.indeportesatlantico.gov.co
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: May 31, 2014, 03:42:21 AM »

Hello,

The issue is that you have too many menu items to fit on a single row on smaller resolutions. The menu when it disappears is actually still there but it is being shifted down below the logo behind the menu bar when the screen size decreases. To fix this you would have to either:

a) Reduce the amount of menu items

b) Reduce the font size of the menu items

#s5_nav li {
font-size: 0.6em !Important;}

c) Run without a logo on the menu bar to give more horizontal axis room for the menu

-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
TejidoSAS
Jr. Member
**
Offline Offline

Posts: 16



« Reply #4 on: June 02, 2014, 09:06:29 PM »

Hello Mike

About solutions:

a) It is impossible to reduce the number of items per customer's request

b) Apply the change to the file: s5_flex_menu.css and not even the menu is displayed.

c) It is impossible for the client request.


I think the problem is in setting the media querys; attached aimage in which it can be seen that 960 pixels wide the menu is displayed, thus:

a) It is not necessary to remove visible items menu.

b) It is not necessary to reduce the font to make the menu visible.

c) It is not necessary to remove the logo to be visible the menu.

I just need it to work the menu at 1024 pixels width. Any idea?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: June 03, 2014, 07:49:17 PM »

Hello,

The issue is definitely that you are running out of horizontal space and reducing the font size would be the only solution to resolve this if the other ones aren't an option. The reason the menu shows up "blank" is because it is being pushed to the next row which is off the menu block. If you add this to the s5_responsive.css it should help get the menu to show up on smaller screens.

Code:
@media screen and (max-width: 1250px) {
  #s5_nav li { font-size: 0.8em }
}

@media screen and (max-width: 1150px) {
  #s5_nav li { font-size: 0.6em }
}
-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
TejidoSAS
Jr. Member
**
Offline Offline

Posts: 16



« Reply #6 on: June 03, 2014, 08:51:39 PM »

Hello

use another option: Adjust s5_responsive.css line 8:

@ media screen and (max-width: 970px) {

by

@ media screen and (max-width: 1030px) {

And shows me the standard menu

Thank you again.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: June 03, 2014, 09:00:56 PM »

Hello,

That works as well. You can play with the resolution size triggers to get more specific if needed as well.

-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
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.