nav bar wrapping on smaller resolutions

Question

I'm trying my hand at HTML5/CSS3 as a learning process but I'm struggling to create a navigation bar for links to other sections across my pages. I adapted the code from a tutorial found and it works but only when viewed on a resolution of 1080p, if the width is smaller, the bar wraps onto other lines.

How do I ensure that the nav bar only takes up one line (shrinks to fit) no matter what resolution the user is using?

Here is my CSS code for the nav bar. Please note, under nav i have set width to 33.3% and padding to the same in order to centre the buttons. I don't know if this is the cause.

nav {
    display:block;
    position: absolute;
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600;
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none;
    display: inline;
    white-space:nowrap; 
} 

nav ul li { 
    float: left;
    position: relative;
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px;
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757;
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px;
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
}


nav ul ul li a { 
    display: block;
    width: 200px;
    text-align: left;
    padding-left: 3px;
    font-size: 14px;    
}   



nav ul li:hover>ul{
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0;

}


nav ul li a:hover { 
    color: #fff;
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
}

skip405 · Accepted Answer · 2012-07-30T20:20:38.590

You almost did it correctly. The problem with your css is that white-space: nowrap; only works for inline elements - but you are using float. Floated elements become block-level even if you set display: inline; property to such an element (it will not be applied). So - if you replace your floats with display: inline-block; - your white-space property will work :)

A live example of inline-blocks and white-space can be seen here: http://jsfiddle.net/skip405/wzgcH/

As for your centering method - there is a better solution. (You may remove the padding and set the proper width) Especially if you are using inline-blocks. Simply set text-align: center; on their parent - and you'll have it centered.

It works if menu has only one level. With nested 'ul' it's doesn't. — Moesio, Sep 01 '14 at 11:03

score 0 · Answer 2 · answered Jul 30 '12 at 19:59

The problem is you are setting the nav width to be a mere 33.3% with the rest being padding. The small allowable space is then pushing all the elements underneath each other when resized past a certain point. To stop this from happening you can do two things, set the nav width to be 100% instead, and second, if you don't want it to resize at all then you have to give it a min-width of the sum of all the a elements' widths put together. You should also most likely give it a max-width as well unless you are using a responsive design. Here's a demo I put together with your modified css: http://jsfiddle.net/c3HE6/

score 0 · Answer 3 · answered Jan 02 '20 at 04:13

Another good option here, if you don't want to go through and change the display property of every single element in your nav bar, is to simply specify the style of your navbar to have a min-width. This prevents wrapping when you decrease the screen size.

nav bar wrapping on smaller resolutions

3 Answers3

Linked