umaldo7 umaldo7 - 2 months ago 6
CSS Question

My Navbar won't align Horizontally

I am currently using Bootstrap 3 to create a website for my first client, but I can't get the navbar to align properly. It stops displaying inline when I hit the col-sm breakpoint. I have looked up many other articles and have applied many different CSS properties but to no avail. At this point, I think there could be a bug in my code, but I don't know for sure. This is my first real project, so I am technically a newbie ( excuse my terrible code :P ). Please let me know if there is anything I am missing. Here is a screenshot and my code.

enter image description here

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="index.html">Spa&bull;ology</a>
</div> <!-- /.navbar-header -->
<!--NAV LINKS-->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav ">
<!--LINKS-->
<li><a href="index.html">Home</a></li>
<!--DROPDOWN LINKS-->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="waxingandsugaring.html">Waxing &amp; Sugaring</a></li>
<li><a href="manisandpedis.html">Manis &amp; Pedis</a></li>
<li><a href="spraytanning.html">Spray Tanning</a></li>
<li><a href="massages.html">Massages</a></li>
<li><a href="lashes.html">Lash Extensions</a></li>
<li><a href="facialsandpeels.html">Facials &amp; Peels</a></li>
</ul><!-- /.dropdwon-menu -->
</li>
<!-- /.dropdown -->
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="http://www.secure-booker.com/spaology/ShopOnline/GiftCertificate.aspx" target="_blank">Gift Certificates</a></li>
<li><a href="http://www.secure-booker.com/spaology/MakeAppointment/" target="_blank">Book Online</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>


Here are some of the CSS properties I have tried. I have used different combinations of these properties with no avail.

.navbar .navbar-nav > li {
float:left;
}

.navbar .navbar-nav > li {
display:inline;
}

.navbar .navbar-nav > li {
display:block;
float:left;
vertical-align: top
}

Answer

Without seeing the all of the relevant CSS, it's hard to give specific advice. However, Bootstrap navbar menus are coded to switch to hidden at the breakpoint you indicate, and the menu items themselves stack vertically.

You can see for yourself here: http://getbootstrap.com/components/#navbar-fixed-top

In order to have your menu stay visible and the items (the <li> elements) remain inline, you need to adjust or otherwise override the CSS for that breakpoint.

Comments