CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joseph
Joseph

Reputation: 13198

Remove unwanted padding at bottom of bootstrap static navbar

I am using Bootstrap and am having trouble with the navbar. In my navbar, I have a few divs that I want to be the full height of the navbar, but the navbar constantly seems to be just a bit taller than the divs inside. I figured this was due to some padding on the navbar somewhere, but I can't find it. Check out this jsFiddle:

https://jsfiddle.net/2fax4vme/

Note the three .rhombus divs. They should be the full height of the navbar, but there is 5 pixels of extra space under them. If I make the rhombus divs 5 pixels taller, the navbar just stretches.

I'm sure this is something simple I'm not missing, but I just can't spot it.

Upvotes: 0

Views: 766

Answers (3)

Stickers
Stickers

Reputation: 78776

Tested: https://jsfiddle.net/2fax4vme/3/

.rhombus {
    height: 50px;
}
#navbar {
    line-height: 0;
}

I found there are few elements set to 50px in Bootstrap, so probably also make yours to the same height is a good plan to avoid editing those default values.

Upvotes: 1

Grokify
Grokify

Reputation: 16364

What about changing the height of .rhombus to height:50px;. It works for me.

For HTML5, it's also necessary to add margin-bottom:-5px per Pevara.

Upvotes: 1

Pevara
Pevara

Reputation: 14308

I would not try and edit the bootstrap navbar css. In stead, why dont you just counter the padding by adding a negative margin bottom to your rhombus (and add an extra few pixels to the height)

       .rhombus{
            height:50px; /* + 5px */
            width: 35px;
            -webkit-transform: skew(-20deg);
            -moz-transform: skew(-20deg);
            -o-transform: skew(-20deg);
            display: inline-block;
            margin:0px;
            padding:0px;
            margin-bottom: -5px; /* counter the padding */
        }

and the updated fiddle: https://jsfiddle.net/2fax4vme/2/

Upvotes: 3

Related Questions