Manvaril Manvaril - 1 month ago 8
jQuery Question

can't remove the padding under menu items bootstrap

I can't seem to get the padding inside the menu to be removed or changed. I don't want my navbar to be so chunky and large. I got the top padding removed but the bottom isn't working.



this is the code that got the top to the right size (border around menu is to show the emphasis on the problem)

.navbar-default .navbar-nav > li > a {
padding-bottom: 0px; /*<-- does not set the bottom to 0px*/
padding-top: 0px;
}


https://jsfiddle.net/Manvaril/v97e0u0w/

Answer

Here is how I would debug this problem:

Start with inspecting the empty space:

enter image description here

I see that the menu shouldn't be 48 pixels tall. Now I inspect the Home link:

enter image description here

So I'd imagine it should be smaller than 48 but larger than 20. Now I work my way back until I find the element that's causing it to be to large:

enter image description here

Now inspect the element styles and find the source:

enter image description here

So it looks like in navbar.less the following code exists:

.navbar {
  min-height: 50px;
}

All you need to do is override that globally or specifically as needed in a stylesheet after bootstrap:

// globally
.navbar {
  min-height: 10px;  // or whatever value
}

// specifically (as best as I can based on your code)
.rgo_wrapper .navbar {
  min-height: 10px;  // or whatever value
}
Comments