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
Related
What is the easiest way to show/hide a div outside the tab content when on that specific tab only? My current example shows but I could not make it hide again.
Plunker: http://plnkr.co/edit/E6dK5C9ZxVQaicQgfS4w?p=preview
<div class="border" ng-show="aboutTabActive == true">Show me when the "About Tab" is clicked.</div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click="aboutTabActive=false">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
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
this is from bootstrap and i can't figure out how to put the navbar-brand on the left and ul navbar-pills on the right of the page. please help. thanks in advance
<div class="page-wrap">
<div class="navmenu">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#index">
<img alt="Brand" src="brand.png">
</a>
</div>
</div>
</nav>
<ul class="nav nav-pills">
<li role="presentation">ABOUT</li>
<li role="presentation">PORTFOLIO</li>
<li role="presentation">BLOG</li>
<li role="presentation">CONTACT</li>
</ul>
</div></div>
I'm not sure how bootstrap works but alone you can use the float properties. So it would look like this in your css file
.navbar{
float:left;
}
.nav-pills{
float:right;
}
If you've already implemented bootstrap and this doesn't work you'd need to look in bootstraps api for information. This does work with jquery though