• Locked
1 reply [Last post]
Sat, 2016-07-16 15:27
chrscote
chrscote's picture
Offline
newbie
Last seen: 2 years 16 weeks ago
Timezone: GMT-4
Joined: 2016-07-16
Posts: 2
Points: 4

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

Top
Tags:
Sat, 2016-07-16 22:46
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Guessing

Not sure what you're trying to do, so this is assumption on my part.

Quote:

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;}
Notice there is no {vertical-align:} property. That only applies to a few elements and {display: block || list-item;} are not among them.

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;}
for a more expected result.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked