Navigation menu wraps when adding new menu items

[SamWM]

If I have 4 or more menu items in the navigations, the menu items can wrap onto the next line. I take width off nav and nav aand it makes no difference. Would be more useful if the menu was more scalable (at least half a dozen menu items should be able to show without wrapping)

[ghost]

Same problem here.

[sotte]

Same problem...

[lukashoffmann]

+1

[verekia]

Okay so to sum up:

• The nav width is 38% compared to the global width of the page,
• Each anchor width in the nav is approximately 30%, so 3 * 30% is still < 100% for 3 elements.

If you want to add more items, you have to adapt their width so they don't exceed 100% (take margins and paddings into account). Like put 20% for 4 elements, or 45% for 2 for instance.

If you add more than 3 items or if the content of your items is long, it might wrap because the nav is limited by its 38% width. In that case just increase the nav width so it matches your needs. The nav's 38% width limitation is here to keep the design consistent and aligned with the aside bar which has the same width, but you can put whatever you want instead if you don't care about this alignment.

To make it scalable, we would have to use a CSS preprocessor like LESS or SASS to calculate the number of elements and adapt the percentages depending on this, which is a little bit overkill compared to just calculate it manually once :)

If you have alternative solutions, please don't hesitate to share them!

[SamWM]

Possible workaround:
#header-container { height:150px; }
#header-container header { position: relative; height: 100%;}
#header-container nav { width: 400px; position: absolute; right: 0; bottom: 0; }

[verekia]

Hi Sam,
Unfortunately, having any hard-coded pixel value (like your width: 400px) breaks the responsiveness of the template, it would be too easy otherwise :)

[WhatFreshHellIsThis]

Verekia: I just tried Sam's solution and it seems to work perfectly. Can you explain why it breaks the responsiveness because it seems to solve the issue completely?

[SamWM]

If you put the width under @media only screen and (min-width: 768px) then that solves the responsiveness. Lower resolution screens will just see the navigation in list format.

To cater for Internet Explorer

.oldie #header-container {
height: 150px; }

.oldie #header-container header {
position: relative;
height: 100%; }

.oldie #title {
font-size: 68px; }

.oldie #header-container nav {
width: 400px;
position: absolute;
right: 0;
bottom: 0; }

[webfeetdesign]

Hi, I'm very new to this and cant seem to work out how to get another 2 navigational links in the header without the li wrapping. Also can you still produce responsive drop down menus with this?

[IngCazzaro]

Hi @verekia, i have 6 tabs, i'm trying with nav width: 16%; or any other value and i only got 2 columns with 3 tabs in each one. What could be the problem? thanks
(The @SamWM solution didn't work too)