So I already looked at some previous answers like:
bootstrap static to fixed navbar jumping on scroll
How to Bootstrap navbar static to fixed on scroll?
But they don't seem to address the central issue that is how jittery it all looks. I have added padding as said in the official bootstrap navbar docs and in the first link I put but it still makes it look off when it becomes fixed. I'm hoping there is a way to make the conversion to fixed be as smooth as possible.
Here is my jsfiddle with my code:
JS:
//Adds smooth scrolling to page start
$("#scrollToMain a").on("click", function (e) {
e.preventDefault();
var hash= this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, function() {
window.location.hash = hash;
});
});
$(window).scroll(function () {
//Checks to see if the nav button is fully visible
if(!$("#scrollToMain").visible(true)) {
$(".navbar").addClass("navbar-fixed-top");
} else {
$(".navbar").removeClass("navbar-fixed-top");
}
});
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron" id="startContent" style="width:100%; background-color:yellow;"><h1>I am here now</h1>
<h1>Me too</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1><h1>Me three!</h1></div>
https://jsfiddle.net/6z492Lry/
Problem occurs on the jump when you go down the page, when the navbar becomes fixed it's very noticeable. I would like this transition to be smooth. Don't click the arrow as the auto scroll hides the issue.
Thanks
The effect is there because when you make your nav fixed your other content is shifted up.
You can make another element that will have same height as your nav and display it only when nav is fixed.
CSS
.navbar-fill-space {
height: 50px;
}
HTML
<div class="navbar-fill-space hidden"></div>
<nav class="navbar navbar-inverse navbar-transparent">
JS
$(window).scroll(function () {
//Checks to see if the nav button is fully visible
if(!$("#scrollToMain").visible(true)) {
$(".navbar").addClass("navbar-fixed-top");
$(".navbar-fill-space").removeClass("hidden");
} else {
$(".navbar").removeClass("navbar-fixed-top");
$(".navbar-fill-space").addClass("hidden");
}
});
jsFiddle
Related
I have a standard Bootstrap (3.3.7) nav item with 2 dropdown menus. Upon loading the page, the first dropdown item in the nav should be exposed by default. When hovering over the second dropdown item, that item should now be the only exposed dropdown until the first is hovered over again. Clicking anywhere on the page should not close any dropdown menu, and clicking on the name of the dropdown (Dropdown #1, etc) must function as a link.
I currently have it so the nav is exposed by default and the nav switches on hover, but clicking anywhere on the page closes the dropdown and I do not know how to override this. Also, is there a better way to have the first item defaulted to open?
My code looks something like this:
$(document).ready(function() {
var $dropdown = $(".nav li.dropdown");
$dropdown.first().addClass('open');
$dropdown.hover(function() {
if (!$(this).hasClass('open')) {
$dropdown.removeClass('open');
$(this).addClass('open');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown #1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown #2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You can prevent the default action of hide.bs.dropdown while closing (removing open class) current dropdown on element click. It's enough to add:
$dropdown.on('hide.bs.dropdown', function (e) {
e.preventDefault();
})
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
And avoid to add open class to current dropdown if it has the class forceclose.
$(".nav li.dropdown").on('mouseenter', function (e) {
if (!$(this).hasClass('open')) {
$(".nav li.dropdown").removeClass('open');
if ($(this).is('.forceclose')) {
$(this).removeClass('forceclose');
} else {
$(this).addClass('open');
}
}
}).on('hide.bs.dropdown', function (e) {
e.preventDefault();
}).first().addClass('open');
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
I'm using the offcanvas.js by Jasny Bootstrap on Prestashop.
My offcanvas menu, once a button is clicked, pushes the main page on the left and enters in slide from the left.
I would like to achieve this:
once the button is clicked the main page SHOULD NOT MOVE, the
offcanvas should slide from left (as it is now) BUT, instead of pushing it, overlap the main page...
Which part of the offcanvas.js should I change?
It sounds like you're using the "push" instead of "slide" option. Use the class "offcanvas" and it should work. Check out these examples:
http://www.jasny.net/bootstrap/examples/navmenu/
I wanted the slide-in for all views, so I simply used the "offcanvas" class, rather than the "offcanvas-sm" you see in the source code for the slide-in example:
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
<a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li class="active">Slide in</li>
<li>Push</li>
<li>Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
I commented the line 155:
//$('body').css(prop, padding)
And line 187:
//$(this).css(placement, 0)
and replaced all canvas-sliding with the class no-sliding...
it worked by attempt!
When my web design collapsed to mobile view, the dropdown menu doesn't push down the button below it, instead the menu shows up half way down the page. This only seems to happen on pages with the carousel function and lightbox2.
Any help would be appreciated.
I have tried this which was suggested in another topic:
.navbar-header {
position: relative;
z-index: 1;
}
Here's the Navbar code:
<nav>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>About Me</li>
<li class="dropdown">Photography<span class="caret"></span>
<ul class="dropdown-menu">
<li>Events</li>
<li role="separator" class="divider"></li>
<li>Music</li>
<li role="separator" class="divider"></li>
<li>Nature</li>
<li role="separator" class="divider"></li>
<li>People</li>
</ul>
</li>
<li>Contact Me</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
and the scripts at the bottom`
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="application/javascript"></script>
<script>
lightbox.option({
'resizeDuration': 600,
'wrapAround': true,
'alwaysShowNavOnTouchDevices': true,
'fitImagesInViewport': true
})
</script>`
Fixed it.
I switched css files earlier on in the day and I didn't realise a .dropdown-menu was missing from the bootstrap css.
.navbar-nav .open .dropdown-menu
I would suggest you to try putting the script tags at top ins. it might work.
On my mobile part of the site I want to show the submenu without having to click/hover the parent.
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
<ul class="dropdown-menu" >
<li>News</li>
<li>Contact
<li>About us</li>
</ul>
<li>
</ul>
</div>
I want to show the submenu without having to click or hover the parent. Codes I'm using is CSS, Javascript and Jquery so I can use one (or all) of them to make this. Using the latest version of Bootstrap to make the site (3.3.6).
EDIT
The JSFiddle: https://jsfiddle.net/uvd5jp0o/
Here you can also see I've made the submenu display on hover in jquery.
You can add the class visible-xs- to make the nav displayed in mobile browsers
Checkout the bootstrap website
http://getbootstrap.com/css/
So, for extra small (xs) screens for example, the available
.visible-- classes are: .visible-xs-block, .visible-xs-inline, and
.visible-xs-inline-block.
Try This:
DEMO
Use some piece of script :)
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul id="Drp" class="dropdown-menu visible-xs">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
SCRIPT:
$(document).ready(function(){
CheckScreenSize();
});
window.onresize = function(event) {
CheckScreenSize();
};
function CheckScreenSize(){
if($(window).width()<768){
$("#Drp").addClass('visible-xs');
}else
{
$("#Drp").removeClass('visible-xs');
}
}
Or you can set a width when you whant the menu to show, like this:
window.onload = checkWindowSize;
window.onresize = checkWindowSize;
function checkWindowSize() {
if ($(window).width() < "768") { //example width of 768px
$("#bs-example-navbar-collapse-1 li").addClass('open');
}else{
$("#bs-example-navbar-collapse-1 li").removeClass('open');
}
}
Or you can use the built in class in bootstrap and add it to your ul-element like this:
<ul class="dropdown-menu visible-xs">
The codes will check the window width and only react when the width is smaller then 768px
My navbar is this:
http://jsfiddle.net/Hg4Ts/3/
my html code:
<div class="wrapper">
<div class="navbar navbar-default" role="navigation">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default</li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
my javascript code:
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
How to put animated collapse closing in my menu, when click outside the button. It´s close when click outside the button but without animation effetc. How to menu button change color only when the collapse is open?
This solution may work for you. Switch your CloseNav() function to below:
function CloseNav() {
$(".navbar-collapse").stop().animate({'height': 0},300, function () {
$('.navbar-collapse').removeClass('in').addClass("collapse");
});
$(".navbar-toggle").stop().removeClass('collapsed');
};
It looks like just adding the .collapse class to the nav bar will just switch the height immediately. If you make an animation and then add the class it creates the slide up effect you wanted.
fiddle demo