CODEWITHSUNDEEP
htmlcsszurb-foundation
Andrew
Andrew

Reputation: 3589

Menu appears in reverse order

I've been trying to build a navbar for my website using Foundation. However, after I've tried the items in my menu bar are now appearing in reverse order. On the right hand side, rather than saying "portfolio about contact" it says "contact about portfolio". Any ideas?

HTML: 

<div id="header-container">
        <div id="header" class="row">   
            <nav class="nav-bar">
                <ul class="left">
                    <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>
                </ul>
                <ul class="right">
                    <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>
                    <li data-slide="3" class="about"><a href="">about</a></li>
                    <li data-slide="4" class="contact"><a href="">contact</a></li>
                 </ul>
            </nav>
        </div><!--end header-->
    </div><!--end header-container-->

CSS: 

div#header ul{
    height: 128px;
    list-style-type: none;
}
div#header ul li {
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;         
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    display: inline;
    padding: 0;
    margin: 0;
}
li.andrewgu {
    width: 200px;
    font-size: 60px;
}
li.portfolio {
    float: right;
    font-size: 30px;
    width: 140px;
}
li.about {
    float: right;
    font-size: 30px;
    width: 110px;
}
li.contact {
    float: right;
    font-size: 30px;
    width: 130px;
}

Website: http://andrewgu12.kodingen.com/ Any help would be appreciated, thanks!

Upvotes: 2

Views: 7045

Answers (3)

Nitin Diwakar
Nitin Diwakar

Reputation: 1

Always remember if you put 'float' in

  • it will reverse the order of the menu, so write float value in tag or to main it's the arrangement as default.

    Upvotes: 0

    • Anand
    Anand

    Reputation: 232

    This is happening because the first list item floats to the right border. The second list item doesn't gets the space between the first item and the right border, and hence comes before the first item and so on.

    In order to overcome this problem, as the best practice is to float the ul to the right, and li to the left. This will resolve the problem.

    Upvotes: 0

    Hushme
    Hushme

    Reputation: 3144

    cahnge float:right; to float:left

    li.portfolio {
    float: left;
    font-size: 30px;
    width: 140px;
}
li.about {
    float: left;
    font-size: 30px;
    width: 110px;
}
li.contact {
    float: left;
    font-size: 30px;
    width: 130px;
}

    and add float:right to ul

    div#header ul{float:right;}

    Upvotes: 2

    Related Questions