Fixed navbar and pushing content in collapsed mode
hello,
i having issue navbar menu in collapsed state. have read lot of discussions menu bars, new bootstrap, doing lot of learning. using fixed navbar, , have seen this page in forum think same issue, code did not work me. want use fixed navbar menu stays @ top of page. when it's collapsed , showing sandwich icon, want menu items push content down, not overlap hiding content in background. adding top margin content create blank space menu drops down on when sandwich item clicked, , not give pushing down effect have.
i found very recent adobe forum page has basic navbar menu fixed top, different issue. copied , pasted new dreamweaver page starting point. used code because recent , looks me basic, , that's need start. copied code below,
is there way modify basic code below , have fixed navbar push content down in collapsed mode?
thank 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>
the bootstrap code above behaves expected fixed-top navba. owing how css fixed positioning works, fixed-top navbar removed normal document flow. has no relationship other elements on page.
if want content push downward when mobile menu expanded, must remove fixed class. , remove css padding-top offset.
<!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">
</head>
<body>
<!--top navbar-->
<nav class="navbar navbar-inverse">
<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">
<div class="col-sm-6">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
<div class="col-sm-6">
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
<h3>heading 3</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris vitae libero lacus, vel hendrerit nisi! maecenas quis velit nisl, volutpat viverra felis. vestibulum luctus mauris sed sem dapibus luctus. pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. quisque varius scelerisque nunc eget rhoncus. aenean tristique enim ut ante dignissim. </p>
</div>
</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>
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment