Geek Answers Handbook

Twitter bootstrap navigator height too low

By default, the navbar height on Twitter-Bootstrap is too small. When the height increases, it spoils the divs below. How to increase the height of the navigation bar, which will shift the entire page down? If possible, how to place navigation links to the top / bottom of the navigation bar.

+8
css twitter-bootstrap navbar
source share
4 answers

I am sure that I do not like this solution, but it works for the time I have to spend on it.

.navbar .container { height: 2em; }

I also needed to add some padding-top to the same selector to make things inside the navbar align well vertically.

edit: I just re-read your question and see that you have problems with the "divs below". In this case, you also need to adjust the gasket on the body tag, for example

 body { padding-top: 6em; }

for Twitter Bootstrap docs on Navbar :

When you attach the navigation bar, do not forget to consider the hidden area below. Add 40px or more apdding to <body>. Be sure to add this after the main Bootstrap CSS and before the extra responsive CSS.

+19
source share

Adding add-ons like this is not enough if you are using responsive bootstrapping. In this case, when you resize your window, you will get a gap between the top of the page and the navigation bar. The correct solution looks like this:

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

Source: Twitter Bootstrap - top navigation bar blocking the top of the page

+6
source share

you can try this. It works in any size of the display.

 .navbar .container { min-height: 83px; } .navbar-fixed-top { position:static; margin-bottom:20px; }
+1
source share
 </script> $(".dropdown-toggle").click(function () { $(".nav-collapse").css('height', 'auto') }); </script>

This solved my similar problem (the submenu did not appear due to the small parent height of ul at the first click), maybe this works for you too.

0
source share

More articles:


All Articles