How do I reduce drop-down size on Bootstrap menu?

Question

I have searched and searched and cannot figure out how to reduce my Bootstrap menu's drop-down size. I have tried modifying everything related to drop-downs in the Bootstrap CSS and cannot get it change.

My current Bootstrap dropdown:

I would like to make the space between each item smaller. Here is my current custom nav CSS:

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

score 1 · Answer 1 · answered Jul 23 '17 at 02:42

Figured it out. Had to add this to my css code:

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

.dropdown-menu li a {
    line-height: 100px;
    height: 100px;
    padding-top: 0;
}

Aravind · Answer 2 · 2017-07-23T02:36:25.627

0

Remove line-height and height property

.navbar-brand,
.navbar-nav li a {

    max-height: auto;
    padding-top: 0;
}

Update 1 :

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

Use > to apply styles under the root class.

LIVE DEMO

edited Jul 23 '17 at 02:36

answered Jul 23 '17 at 02:09

Aravind

40,391
16
91
110

Thanks for the answer, but I am still trying to keep that height with my navbar. Those height elements make it 100px tall, i just dont want that to affect the dropdowns. – Jul 23 '17 at 02:31
can you create a plunker demo? – Aravind Jul 23 '17 at 02:32
@AKendrick did you see my demo? – Aravind Jul 23 '17 at 02:43

How do I reduce drop-down size on Bootstrap menu?

2 Answers2