Adjusting Bootstrap dropdown menu height [closed]

Question

My problem is that I can't adjust the height of the dropdown menu in bootstrap.

I want the height in the navbar to be 75px so my logo fits in the menu, but I want to keep the dropdown menu height 50px with it's standard line-height and everything.

Here is the link of my problem: http://www.bootply.com/zeYJxjO62s

Any suggestions on how to fix this?

Answer 1

You need to target direct child in your css:

.navbar-brand, .navbar-nav > li > a {
    line-height: 100px;
    height: 75px;
    padding-top: 0px;
}

Not .navbar-nav li a as this affects all links inside your navbar.

Answer 2

I had quite similar problem and i the final solution was as the description below. Nice thing about this is that it work not only for navbar but in general wherever you would want to use it.

A dropdown html example:

<div class="dropdown-thin">
    <div class="btn-group">
        <a class="btn btn-primary" href="#">CLICK HERE...</a>
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="fa fa-caret-down" title="Click to toggle..."></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="/action/one/@Model.Id">ONE</a></li>
            <li><a href="/action/two/@Model.Id">TWO</a></li>
            <li class="divider"></li>
            <li><a href="/action/last/@Model.Id">Last</a></li>
        </ul>
    </div>
</div>

To make the standard dropdown list thinner in height dimension just put it in your css file (usually /Content/Site.css) this:

.dropdown-thin a {
    height: 25px;
    padding-top: 2px;
}

Happy coding :)