Fixed navbar and pushing content in collapsed mode
Hello,
I am having an issue with the navbar menu in the collapsed state. I have read a lot of discussions about menu bars, but I am new to bootstrap, so I am doing a lot of learning. I am using a fixed navbar, and have seen this page in the forum with what I think is the same issue, but the code did not work for me. I want to use the fixed navbar so the menu stays at the top of the page. Then when it's collapsed and showing the sandwich icon, I want the menu items to push the content down, not overlap it thus hiding the content in the background. Adding top margin to my content will just create a blank space that the menu drops down on when the sandwich item is clicked, and does not give the pushing down effect that I would like to have.
I found this very recent Adobe forum page that has a basic navbar menu fixed to the top, but is for a different issue. I just copied and pasted it into a new dreamweaver page for a starting point. I only used the code because it was recent and looks to me to be very basic, and that's where I need to start. I copied the code below,
Is there a way to modify the basic code below and have a fixed navbar push content down in the collapsed mode?
Thank you very much!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/**offset navbar-fixed-top**/
body {padding-top: 55px}
</style>
</head>
<body>
<!--top navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">XYZ Company</a></div>
<!-- add menu items-->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li></ul>
<!-- ADD SEARCH FORM HERE -->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<!--/end top navbar-->
</nav>
<div class="container">
<div class="row">
PAGE CONTENT GOES HERE....
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
AdChoices