Bennet G. Bennet G. - 4 months ago 7
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!

CSS: http://hastebin.com/yucatebero.css

HTML: http://hastebin.com/wikitaxeli.xml

The Probleme: https://gyazo.com/c61e26cad3048a85eb40cd9dfa6b83d0

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: https://jsfiddle.net/tkL4f920/

Thanks for the help.

Answer

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

<div class="navbar">
        <ul>
            <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>
            </div>
        </ul>
</div>

This works fine. https://jsfiddle.net/tkL4f920/1/

Comments