html - Menu appears in reverse order -
i've been trying build navbar website using foundation. however, after i've tried items in menu bar appearing in reverse order. on right hand side, rather saying "portfolio contact" says "contact portfolio". 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/ appreciated, thanks!
cahnge float:right;
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
ul
div#header ul{float:right;}
Comments
Post a Comment