Shape 5

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.

Hello,

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

-Mike

In the image you can see, but:

www.indeportesatlantico.gov.co (http://www.indeportesatlantico.gov.co)

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

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?

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.

-Mike

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.

Hello,

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

-Mike