CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Gattoo
Gattoo

Reputation: 3079

Twitter-Bootstrap navbar height too small

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.

Upvotes: 8

Views: 36322

Answers (4)

Ceren Akın
Ceren Akın

Reputation: 1

</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.

Upvotes: 0

Faisal Khan Samrat
Faisal Khan Samrat

Reputation: 309

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;
    }

Upvotes: 1

jpillora
jpillora

Reputation: 5262

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

Upvotes: 6

Chris
Chris

Reputation: 1419

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.

Upvotes: 19

Related Questions