CODEWITHSUNDEEP
htmlcssnavigationresponsive-design
jd182
jd182

Reputation: 3260

Responsive menu - reducing margin on resize

I'm trying to set up my horizontal menu so that it will 'squeeze' my navigation items together until the space between them has been used up, keeping an even space between each one as it reduces.

Once it gets to the point that the items are too close together my media query will kick in to re-arrange the menu.

I'm having trouble creating the 'squeezing' behaviour though. As soon as the window size is reduced, rather than squeezing my nav items up it's pushing them onto two lines.

Is there any way to get around this behaviour with just HTML and CSS?

Here's what i'm doing so far:

<nav id="menu">
    <ul>
        <li><a href="#">Menu item1</a></li>
        <li><a href="#">Menu item2</a></li>
        <li><a href="#">Menu item3</a></li>        
        <li><a href="#">Menu item4</a></li>
        <li class="last"><a href="#">Menu item5</a></li>
    </ul>
</nav>

And the CSS:

#menu ul, #menu li { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
}

#menu li { 
    float:left; 
    margin-right:4%; 
}

I've also put this into a fiddle so you can see what I mean - http://jsfiddle.net/q3gjg/. I don't want the items pushed onto two lines until there is no horizontal space left between them.

(I know this could be done using a series of media queries that reduced the margin between the items in steps, but this would result in a lot of media queries and doesn't seem very elegant).

Thank you

Upvotes: 3

Views: 3949

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24713

You need a different approach. Don't use margins in this instance, use width and percentage.

DEMO http://jsfiddle.net/kevinPHPkevin/q3gjg/1/

#menu li { 
    float:left; 
    display: block;
    width: 20%;
    text-align: center;
}

EDITED

You state you do not wish to use media queries due to the amount you would need, but in this instance you would only need 2

DEMO http://jsfiddle.net/kevinPHPkevin/q3gjg/3/

@media (max-width: 440px) {
   #menu li { margin-right:2%;} 
}
@media (max-width: 400px) {
   #menu li { margin-right:0;} 
}

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85565

You can try using display: table-cell; to your list rather using float: left;

#menu li {   
    padding-right:4%; 
    display: table-cell;
    width: 200px; /* give here your menu width */
}

demo

Upvotes: 4

Related Questions