Menu
I am having an issue with twitter bootstrap this is how my navbar looks like:
There is a gap between the top of the page and the navbar. I tried using
.navbar{ position: fixed !important; top: 0px; padding: 0px; margin: 0px; }
in my css file but its still not working. It looks like this in mobile and desktop (with the responsive css). I tried putting my sites css after the responsive css and before but it doesn't do anything. Does anyone have any idea why is this so?
THe navbar 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;
}
501
This is because of the browsers predefined CSS-Styles. Normally, you would reset the browsers CSS-styles, like giving everything a margin and padding of 0 or remove the bullet points from the li s. Check out Eric Meyers CSS Reset for example. put this on top of your CSS and everything will be fine.
The gap you see, is because of the top-margin of the h1 in the header. So you can set the top margin of that h1 to 0 to remove the gap.
Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.
Make your you body,html doesnt have any padding to,
html, body{
margin:0px;
padding:0px;
}
Just to give one more piece of advice in case anyone googles this and has the same problem as me. Always, always make sure you are not over looking a much more simple solution to this problem. In my case, the navbar was pushed down as if some part of the document had approx. ~40px of padding but, the issue was a stray character being hidden above the navbar like so:
<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*-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
