Menu
I want to move one of my li elements to the right, i looked at other solutions but they are not working. li.right{ text-align: right;} should work, but maybe it is canceled by previous css ?
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar container">
<ul class="nav navbar-nav">
<li><a href="#">Mac</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Watch</a></li>
<li class="right"><a href="#">Log In</a></li>
</ul>
</div>
</nav>
</body>
Here is CSS
.navbar {
min-height:32px !important
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar{
text-align: center;
padding-top: 5px;
}
.navbar{
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
li.right{
text-align: right;
}
727
asked Dec 20 '25 00:12
It's cleaner to use the bootstrap built in classes, that are designed for this purpose:
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar container">
<ul class="nav navbar-nav">
<li><a href="#">Mac</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Watch</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log In</a></li>
</ul>
</div>
</nav>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
