I have a menu at the top of my page in which all but one menu item is a single line. The other item scrolls to a second line. I am trying to make the single-line items appear at the bottom of the menu, but I can't figure out how to get this done. Another issue I'm having is that the single-line menu items' background colors aren't filling the vertical space either.
Here is my HTML for the menu:
<div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav text-right"> <li class="active"> <a href="#">Home</a> </li> <li class="dropdown"> <a href="#products" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span> <ul class="dropdown-menu"> <li> <a href="#">Hooks</a> </li> <li> <a href="#">Lures</a> </li> </ul> </a> </li> <li> <a href="#staff">Pro Staff</a> </li> <li> <a href="#photos">Photo Gallery</a> </li> <li> <a href="#contact">Contact</a> </li> <li> <a>Rippin Lips<br />Schedule</a> </li> </ul> </div>
and this is the CSS I'm using:
.navbar-nav > li { background-color: #F00; color: green; font-size: 16px; font-weight: bold; text-align: center; } .navbar-nav > li { padding-bottom: 20px; vertical-align: bottom; } .navbar-nav>li:last-child{ padding-bottom:0px; float: right; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover { background-color: green; color: #FF0; }
I really need help figuring out how to make this menu work properly. All help will be greatly appreciated.
Chris
Guessing
Not sure what you're trying to do, so this is assumption on my part.
I am trying to make the single-line items appear at the bottom of the menu,
If you mean the non-sub-menu items should appear last (at the bottom), you'll have to re-order the UL's LIs. If you mean the text should appear at the bottom of the LI box, do this:
.navbar-nav > li { padding-top: 20px;}
Regarding the bg color not filling the LI box, that may be a browser bug (works fine in Firefox, but Chrome sets bullets outside the LI box which may be correct.). IE used to be really bad about stuff like that due to their stupid layout model. They finally wrote some sane code and the issue should be fixed now. I don't have IE any more, so can't test it. Try putting the bg color on the UL element.
You may do this:
.navbar-nav>li:last-child { padding-bottom:0px; text-align: right;}
cheers,
gary