Last Updated: February 25, 2016

Fluid horizontal nav

Here's a demo

HTML:

<ul class="nav nav--fluid">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Why us?</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.nav {
    margin: 0;
    padding: 0;
}

.nav--fluid {
    display: table;
    width: 100%;
}

.nav--fluid > li {
    display: table-cell;
    text-align: center;
}

#css

Written by Kasper Mikiewicz

Say Thanks

Respond

Related protips

Fully custom select box, simple css only

566.6K

Change the Bootstrap NavBar Breakpoint

497.5K

Creating full width (100% ) container inside fixed width container.

451.8K

3 Responses

Add your response

gaprl

Good tip, thanks! Unfortunately, IE7 doesn't support display: table.

over 1 year ago ·

pointpointclick

Good stuff... I'm curious about the naming convention the css. More specifically, the "--" in ".nav--fluid". Wondering if this selector is being constructed to reflect the type/role/function/behavior of the element the selector corresponds to, or if it's arbitrary and I'm trying to read too far into it? It definitely looks like there's some kind of pattern being followed.

over 1 year ago ·

idered

@pointpointclick And you're right :) read this http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

over 1 year ago ·