Making custom navigation bar with left- and right-aligned elements
Question
I did a lot of searching before asking this question and could not find a solution. Problem: I would like a simple navigation bar with one left-aligned item and the rest right-aligned.
Code:
body { margin: 0px; padding: 0px; font-family: 'Arial', serif } .nav { font-size: 13px; background-color: #7a7d82; list-style: none; margin: 0px; padding: 0px; border: 1px solid; position: fixed; width: 100%; } .nav li { text-align: center; float: right; } .nav li:first-child { float: left; } .nav li a { display: block; color: #ffffff; text-decoration: none; padding: 10px; } .nav li a:hover { background-color: #000000; }
<body> <div class="navbar-custom"> <div id="navbar"> <ul class="nav"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div>
I have tried using float but that does not seem to work. I want the navbar to be positioned fixed to the top of the screen. I have tried splitting the "HOME" and the rest of the menu items into separate <ul> tags but that does not seem to work either. I apologize if this has been asked before, but I am new to CSS and still learning the ropes.
2 answers
solution1
0 2017-03-02 16:49:51
Floating will do the trick, and there are a couple of ways to approach it:
This fiddle achieves it using classes:
https://jsfiddle.net/vbc330Lj/
<div class="navbar-custom">
<div id="navbar">
<ul class="nav">
<li class="left"><a href="#">HOME</a></li>
<li class="right"><a href="#">CONTACT</a></li>
<li class="right"><a href="#">PORTFOLIO</a></li>
<li class="right"><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
#navbar{
position: fixed;
top: 0;
width: 100%;
}
.nav li{
margin: 0 10px;
}
.nav li.left{
float: left;
}
.nav li.right{
float:right
}
And you can also be more dynamic by only targeting the first item (if that's the real use-case):
https://jsfiddle.net/2bc4j3c7/
<div class="navbar-custom">
<div id="navbar">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
#navbar{
position: fixed;
top: 0;
width: 100%;
}
.nav li{
margin: 0 10px;
}
.nav li{
float: right
}
.nav li:first-of-type{
float: left;
}
solution2
0 ACCPTED 2017-03-02 16:56:03
Make .nav a flex-container ( display: flex ) and apply margin-right: auto; to its first child:
body { margin: 0px; padding: 0px; font-family: 'Arial', serif } .nav { display: flex; font-size: 13px; background-color: #7a7d82; list-style: none; margin: 0px; padding: 0px; border: 1px solid; position: fixed; width: 100%; } .nav li:first-child { margin-right: auto; } .nav li a { display: block; color: #ffffff; text-decoration: none; padding: 10px; } .nav li a:hover { background-color: #000000; }
<body> <div class="navbar-custom"> <div id="navbar"> <ul class="nav"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.