Nav Menu Auto Width change according to browser

Question

Nav Menu Auto Width change according to browserNav Menu Auto Width change according to browserNav Menu Auto Width change according to browserNav Menu Auto Width change according to browser

<div id="pageTop"> 
    <nav>


nav > ul > li > div ul > li {
    display: block;
}

Answer 1

You need some css properties such as float:left for nav ul li and padding. I have set your nav by following code visit link

#pageTop {
    height: 172px;
    border: 1px red dashed;
}

 nav ul li {
        height: 50px;
        width: 10.666666667%;
        text-align: center;
        background: #ddd;
        border-right: 1px solid #fff;
        float:left;
        padding:10px 0px;
        list-style:none;
    }

Answer 2

try this

in #nav li replace

  width:auto;

// width: 16.666666667%;

Answer 3

loose all the CSS and just try

nav{
    display:table;
}

li{

display:table-cell;
}

Answer 4

i have used a bit of jquery to find the width of the screen and divide the width by the number of links in your menubar.. this solution should work across all browsers and the browser sizes. checkout the updated fiddle http://jsfiddle.net/eCPSh/721/ hope this helps..

jQuery

var width = $('#nav').width();
var size = (function(){
if(width > 990){    
$('#nav li').css("width",width/6 - 5);
} else {    
$('#nav li').css("width","160");
}
});
size();
$(window).resize(function(){
size();
});