Twitter-Bootstrap navbar height too small

Question

The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below. How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.

solved. changed height in .navbar .nav added padding-top and gave a value — Gattoo, Mar 30 '12 at 09:15
post your results as an answer and approve it by ticking the green checkmark to give this question closure, this way it will help other users in the future. — Andres I Perez, Apr 02 '12 at 11:55

Chris · Accepted Answer · 2012-04-13T19:36:11.943

I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.

.navbar .container { height: 2em; }

I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.

edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.

body { padding-top: 6em; }

per the Twitter Bootstrap docs on Navbar:

When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

score 6 · Answer 2 · edited May 23 '17 at 12:06

6

Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Source: Twitter Bootstrap - top nav bar blocking top content of the page

edited May 23 '17 at 12:06

Community

1
1

answered Oct 04 '12 at 17:23

jpillora

5,194
2
44
56

score 1 · Answer 3 · answered Jan 09 '13 at 07:00

1

you can try this one. it works in any size of display.

.navbar .container { min-height: 83px; }


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }

answered Jan 09 '13 at 07:00

Faisal Khan Samrat

309
1
6

score 0 · Answer 4 · answered Aug 07 '13 at 01:15

</script>

$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});

</script>

This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.

Twitter-Bootstrap navbar height too small

4 Answers4