Bennet G. Bennet G. - 1 year ago 61
HTML Question

CSS Navbar not in the correct order?

I'm messing with my navbar for my CSS-Framework. The Code I got so far, will be linked in a hastebin. The Problem is, that the "li"s will not be displayed in the correct order. Hope someone can help!



The Probleme:

nav {
display: block;
width: 100%;

.navbar {
background: #f96e5b;
width: 100%;

.navbar-fixed-top {}

.navbar ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;

Working fiddle:

Thanks for the help.

Answer Source

Wrap the "you" "today" with a div with navbar-right if you wish to keep the order.

<div class="navbar">
            <li class="navbar-left"><a href="#">Hi</a></li>
            <li class="navbar-left"><a href="#">How</a></li>
            <li class="navbar-left"><a href="#">are</a></li>
            <div class="navbar-right">
                <li class="navbar-left"><a href="#">you</a></li>
                <li class="navbar-left"><a href="#">today</a></li>

This works fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download