Menu
There is a mysterious space (roughly 25px) between the navbar and the content div. I am using Chrome and 1600x900 screen resolution. I have looked at other questions with the exact same problem, and I applied the answers given, but the problem persists. I have set the margin bottom of the navbar to 0 and override Bootstrap 3.1.1. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/hover.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="#"><img src="img/title.png"></img></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="content"></div>
</body>
</html>
CSS
body {
padding: 70px 0 0 0;
}
html, body{
height: 100%;
}
/* Top Navigation Bar */
.navbar-fixed-top {
background: #F7F7F7;
min-height: 0;
height: 45px;
padding: 5px 0;
margin-bottom: 0;
}
.navbar-header{
height: 35px;
padding: 5px 0;
}
.content{
width: 100%;
height: 450px;
background: rgb(255, 240, 240);
}
755
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.
Try setting the margin to zero on the content class. Show activity on this post. and change the padding-top attribute to whatever fits your design.
If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element.
Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.
Change the body padding to..
body {
padding: 45px 0 0 0;
}
http://www.bootply.com/127737
123
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
