All geek questions in one place

Bootstrap: Navbar that doesn't have fixed size, has 40px padding?

I have a problem with twitter bootstrap, here is what my navigator looks like: Bootstrap navbar is in bue

There is a gap between the top of the page and the navigation bar. I tried to use

.navbar {position: fixed! important; top: 0px; padding: 0px; margin: 0px; }

in my css file, but it still doesn't work. This is similar to mobile and desktop (with responsive css). I tried to put my css sites after responsive css before, but it does nothing. Does anyone know why this is so?

Navigation data from bootstrap.css:

.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0; } .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding-right: 0; padding-left: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } .navbar-fixed-top { top: 0; } .navbar-fixed-bottom { bottom: 0; } .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; }
+6
source share
5 answers

Make your body, html does not have any extras,

 html, body{ margin:0px; padding:0px; }
+13
source

Are you navbar-inner ? For the navigator, you will need this class hierarchy and div:

  <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> ... </div> </div>
0
source

Check if there is body padding-top or margin-top . If you are directly trying to edit the page of the bootstrap document, it has a padding-top for the body so that the content is not wrapped under a fixed navigator.

0
source

Remember to reset padding and margins for all elements

 * { margin:0; padding:0; }

Also, if the contents of the internal navigation bar has an upper border, it can sometimes also click on it.

0
source

Just to give one more tip if someone catches this and will have the same problem as me. Always, always make sure that you no longer look for a much simpler solution to this problem. In my case, the navigation bar was pushed down, as if some part of the document had approx. ~ 40px indentation, but the problem was that the stray character was hiding above the navigation bar like this:

 <script> *JavaScript would go here* \</script> <!-- Here you can see the offending backslash before the '</script> tag and it was hidden due to it being a similar color to my dark background. --> <body id="wrapper"> {% block navbar %} <nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <!--- Logo --> <!--*rest of the file*-->
0
source

Source: https://habr.com/ru/post/946679/

More articles:


All Articles