CODEWITHSUNDEEP
css
user3442612
user3442612

Reputation: 1822

How to get menu text vertically aligned with inherited height

I have a pretty standard Bootstrap nav menu with some custom modifications. An issue I'm having with the nav is with both the a:hover selector and vertical-align property. I need to have the a:hover selector fill 100% of the height of the menu bar, but as soon I get this working, my vertical align effect stops working (and vice versa). How can I meet both requirements?

(For clarity, see my comment in the CSS code)

Thanks.

Here is my Fiddle -- Code also below...

http://jsfiddle.net/n2fole00/42d30eoh/

HTML

<div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="row">
            <!-- 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="#secondary-menu-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="secondary-menu-collapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">ONE</a></li>
                    <li class=""><a href="#">TWO TWO</a></li>
                    <li class=""><a href="#">THREE THREE THREE</a></li>
                    <li class=""><a href="#">FOUR FOUR FOUR FOUR</a></li>
                    <li class=""><a href="#">FIVE FIVE FIVE FIVE FIVE</a></li>
                </ul>
            </div>
        </div>
    </nav>

CSS 

#secondary-menu-collapse .navbar-nav {
    display: table; 
    width: 100%;
    height: 100%;
}

#secondary-menu-collapse .navbar-nav li {
    width: 20%;
    display:table-cell;
    vertical-align: middle;
    text-align: left;
    float:none;
    height:inherit;
}

#secondary-menu-collapse .navbar-nav li a {
    height:inherit; /* Removing this gives the correct vertical alignment, but the background hover doesn't fill the height of the menu bar. */
}

#secondary-menu-collapse .navbar-nav li a:hover {
    background-color:green;
}

Upvotes: 0

Views: 111

Answers (1)

Calvin Scherle
Calvin Scherle

Reputation: 312

Does it have to be the a selector?

If you just have the :hover on the li item, like so:

#secondary-menu-collapse .navbar-nav li:hover {
    background-color:green;
}

then the whole list item (rather than just the text inside, which is in the anchor tag) will have its background color become green. Then you can remove the height:inherit; property from the anchor tag.

This will make the background green for ALL hovered items. If you want the active item to stay black, you can also add:

#secondary-menu-collapse .navbar-nav .active {
    background-color: #080808 !important; /* The !important makes sure this has priority */
}

Updated JSFiddle

Alternatively, if you don't want to use !important or you want a different color when you hover on the active item, you can use this instead:

#secondary-menu-collapse .navbar-nav .active:hover {
    background-color: #BBBBBB; /* Set a hover color for the active item here */
}

Upvotes: 1

Related Questions