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
Related
The html code is
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
The jquery code is
$('#accountNavX' ).hide();
This has not worked.My end goal is to only hide all the account nav list items.
Edit:
Was lazy accountNavX was referring to me repeating it three times with the respective number.
jQuery hides by writing display:none directly on the element. Usually it takes precedence over all. Bootstrap attaches !important to it's display: block code, thus preventing jquery from overriding it.
You would have to do the following:
$('.accountNavX').removeClass('visible-xs-block').hide();
In below code snippet, I have added a class acc-nav. I am using that to hide elements.
Or you can use a different selector like li[id^=accountNav].
function hideNavItems() {
// $('.acc-nav').hide()
$("li[id^=accountNav]").hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="acc-nav visible-xs-block">Account</li>
<li id="accountNav2" class="acc-nav visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="acc-nav visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
<button onclick="hideNavItems()">Hide Account Nav items</button>
</div>
Try this:
$('[id^=accountNav]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
#f.khantsis answer is correct.
Here's my solution in CSS way. You can use media query to hide certain elements in smaller break points,
#media (max-width: 767px){
#accountNav1, #accountNav2, #accountNav3{
display: none !imporant;
}
}
This way you don't need to worry for larger screen which button will appear automatically.
Just add a new class to all the accountNav-id- items. For example add a class called accountNav to all of those. Then just call $(".accountNav").hide();
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
and js code:
function logout(){
$('.nav').children().hide();
}
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
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.
I am really new with bootstrap, and I'm trying to apply the active class to a menu, but for some reason is not working, I don't know if it is the jquery function (I got it from a tutorial) or if bootstrap won't allow the use of active links.
JS Fiddle Demo
HTML
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
CSS
nav-justified a.activee {
background:red !important;
}
JS
jQuery(function() {
jQuery('.nav-justified a').each(function() {
if (jQuery(this).attr('href') === window.location.pathname) {
jQuery(this).addClass('activee');
}
});
});
In your JavaScript code you're checking to make sure that the href attribute of your link is equal to window.location.pathname but, in your JSFiddle, none of the links have a matching attribute. Try this instead:
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
http://jsfiddle.net/021qbcvd/7/
Note that window.location.pathname is equal to everything after the main URL. I had to do an alert(window.location.pathname) to get the correct one for the JSFiddle.
if you use twitter-bootstrap 3,can use this code :
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>CARS</li>
<li>MODEL</li>
<li>COLORS</li>
</ul>
</div>
</div>
and use class="active" in li tag to show active page