Navigation items wrapping to new line

[brandoutloud]

I am getting wrapping on the primary navigation bar items when you decrease the browser width where it wraps CONTACT on to a new line when there is still plenty of space on the width of the screen so it should’t need to at that width.

Please see screen grab.

Any ideas how to avoid this?

[49ideas]

I am also looking for a solution to this. Thanks.

[Cosmin – SUPPORT]

Hi,

The theme is coded so that it will work on 99% of the mobile devices; testing like that by adjusting the browser window to catch a hole in the system is irrelevant, as that will not happen on desktops or mobile devices.

If you get this on any mobile device, please let us know which one. If it is a standard desktop resolution, also please let us know. Otherwise, as with any responsive design, there will be certain gaps that are not covered by standard devices, and you always will be able to get such things. But again, testing like this is not a real use scenario, it’s not something that responsive design covers or should cover.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[mixicus]

i get this bag at desktop PC with standart resolution.

[brandoutloud]

I get this on a desktop 27″ MAC on Safari.

[Cosmin – SUPPORT]

Hi guys,

If you’re getting navigation wrapping at desktop resolutions like over 1200px in width, then it’s most likely that you have more items in the menu than it can hold.

If you could show us your pages, I’ll have a look and let you know exactly what’s wrong.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[mixicus]

look at screen shout – first menu string have many place but last menu item on next string
i need fix – else i cant make normal menu

[Cosmin – SUPPORT]

Exactly what I was thinking – the total length (character count) of your menu items make the menu too big for its container to hold, so it spills on to a new line.

In this case, the only solution would be to use drop down menus or make the menu font size smaller. This second option isn’t ideal, as it can happen that you will need a very small font size. But if you’d like to try it, it can be done with this custom CSS:

nav .menu li {
  font-size: 11px !important;
}

You can try different values in there and see what fits best.

Finally, you could also disable Menu Dividers in Pinpoint Options/Header Options.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[ritchmedia]

Cosmin isn’t this because the framework only used 12 of the 16 columns for navigation and 4 for the search/login etc…

I got round this by editing header.php line 364 from twelve columns to sixteen

364 <nav id="main-navigation" class="sixteen columns alpha">


obviously this would need re-editing after every theme update.

[Cosmin – SUPPORT]

You could do that as well, but:

1. It’ll need re-doing after each update, as you mentioned.

2. It’ll interfere with the aux nav on the right-hand side.

Regards,

————————————————————————————————————

Cosmin
Support Assistant