Menu
Although there is a related question, his problem seems like my solution but I have no Idea to make progress.
I'm using bootstrap navbar that is fixed to the top to make.. navigation menu. on mobile pages(where screen size is small), I have to bring them by pressing some menu button on top-rightmost corner.
however when the menu pops up, I'd like it to push the page down, instead of overlaying it.
here's my code.. what edit should I make to get rid of overlaying?
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#!/">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#!/notice">notice</a></li>
<li><a href="#!/board">board</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a id="a-logout" href="#!/logout">sign out</a>
</li>
<li>
<a href="#!/user">Your page</a>
</li>
</ul>
</div>
</div>
</div>
850
My current solution is to insert a span tag between the header div and content div and set it's height equal to the height of the nav bar. This will push the content down so that the top of it is visible below the header bar.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
In Bootstrap 4, full width dropdown in Navbar might be possible by adding CSS properties either internally or externally based on conveniences. Focus on class dropdown and dropdown-menu only. Now, make top margin of dropdown-menu as zero pixel and add width to 100%. We can also use CSS properties through inline method.
The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. With a few helper classes, you can place it either on the top or bottom of the page, or you can make it scroll statically with the page.
padding-top by two constantsBody padding is required when you use a navbar with the .navbar-fixed-top class:
The fixed navbar will overlay your other content, unless you add padding to the top of the
<body>.By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
Collapse events help to change the value of the padding-top property:
show.bs.collapsefires immediately when the show instance method is called.
hide.bs.collapseis fired immediately when the hide method has been called.
You can copy transition properties from the .collapsing class.
User can increase the width of the window while the menu stays expanded. In this case it is necessary to reduce the padding-top property for the body. For example by media-query and !important.
So let's define padding-top value using two constants - 50px and 235px.
var selectBody = $('body');
/* 2. */
$('.navbar-collapse').on('show.bs.collapse', function () {
selectBody.css('padding-top', '235px');
})
$('.navbar-collapse').on('hide.bs.collapse', function () {
selectBody.css('padding-top', '50px');
})@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
/* 1. */
padding-top: 50px;
/* 3. */
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: padding-top;
-o-transition-property: padding-top;
transition-property: padding-top;
}
/* 4. */
@media (min-width: 768px) {
body {
padding-top: 50px !important;
}
}<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left 1</a></li>
<li><a href="#">Left 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right 1</a></li>
<li><a href="#">Right 2</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>outerHeight()
Let's set the padding-top value by the outerHeight() function.
And let's collapse navbar when user increase the screen width to 768px or more.
http://codepen.io/glebkema/pen/PGbZPG
var selectBody = $('body');
var selectNavbarCollapse = $('.navbar-collapse');
var heightNavbarCollapsed = $('.navbar').outerHeight(true);
var heightNavbarExpanded = 0;
paddingSmall();
selectNavbarCollapse.on('show.bs.collapse', function() {
if (heightNavbarExpanded == 0) heightNavbarExpanded = heightNavbarCollapsed + $(this).outerHeight(true);
paddingGreat();
})
selectNavbarCollapse.on('hide.bs.collapse', function() {
paddingSmall();
})
$(window).resize(function() {
if ((document.documentElement.clientWidth > 767) && selectNavbarCollapse.hasClass('in')) {
selectNavbarCollapse.removeClass('in').attr('aria-expanded', 'false');
paddingSmall();
}
});
function paddingSmall() {
selectBody.css('padding-top', heightNavbarCollapsed + 'px');
}
function paddingGreat() {
selectBody.css('padding-top', heightNavbarExpanded + 'px');
}@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: padding-top;
-o-transition-property: padding-top;
transition-property: padding-top;
}<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left 1</a></li>
<li><a href="#">Left 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right 1</a></li>
<li><a href="#">Right 2</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>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
