CODEWITHSUNDEEP
htmlcssviewportnavigationbar
Ankit Tuli
Ankit Tuli

Reputation: 15

How to adjust menu width according to window width

I am designing navigation menu, but I couldn't adjust width according to window. I want to make menu width 100%, as we change the window size, the menu still covers from left corner to right corner.

The following code I am using for designing navigation:

HTML

<nav class="span9">
<!-- Menu-->
<ul id="menu" class="sf-menu">
    <li class=""><a href="index.html" class="sf-with-ul">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li class=""><a href="work.html" class="sf-with-ul">WORK</a></li>
    <li class=""><a href="blog.html" class="sf-with-ul">BLOG</a></li>
    <li class=""><a href="tables_princing.html" class="sf-with-ul">FEATURES</a></li>                                                        
    <li><a href="contact.html">CONTACT</a></li>
 </ul>
 <!-- End Menu-->
</nav>

CSS

.sf-menu {
    margin: 0;
    padding-top: 7px;
}
.sf-menu > li {
    position: relative;
    float: left;
    list-style: none;
    line-height: 20px;
    margin: 0 40px 0 0;
}
.sf-menu > li > a {
    text-decoration: none;
    display: block;
    font-size: 17px;
}

Here the JSFIDDLE LINK

Upvotes: 1

Views: 8303

Answers (2)

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

If you want to make width 100% for navigation menu bar. Try the following CSS for your HTML.

CSS

nav {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: none;
}
nav ul {
    display: table-row;
}
nav li {
    display: table-cell;
    margin: 0;
}

Here the JSFIDDLE LINK

Upvotes: 0

chamath
chamath

Reputation: 21

Setting a min-width to parent element will solve this issue. But still it might create a scroll or if you set overflow to hidden it will crop some text out. To prevent this scrolling / cropping you can use javascript or css3 media query. I prefer media queries over javascript solution. But you may need css3 supported browser. Here is the modified fiddle with css media query 

.sf-menu {
margin: 0;
padding-top:7px;}
.sf-menu > li {
position: relative;
float: left;
list-style: none;
line-height: 20px;
margin: 0 40px 0 0;
}
.sf-menu > li > a {
text-decoration: none;
display: block;
font-size: 17px;
}
@media all and (min-width:500px){
.sf-menu > li {
    position: relative;
    float: left;
    list-style: none;
    line-height: 14px;
    margin: 0 30px 0 0;
}    
.sf-menu > li > a {
    text-decoration: none;
    display: block;
    font-size: 14px;
}
}

Upvotes: 1

Related Questions