First of all, please be inform that I already know, we can add affix utility to all kind of regular navbar in Bootstrap, In my case ,however, I need to add the affix to a specifically navbar-fixed-bottom Navbar.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<!-- 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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container" style="height:3000px;"></div>
The reson that I would like to do this is presenting the navbar at the bottom of viewport on page loading and on scroll down affix it to the top.
Can you please let me know if this is doable?
You need to add CSS to handle the navbar when affix is applied. In your case, that would be changing the navbar top:0; so that it no longer is fixed to the botttom.
.affix.navbar-fixed-bottom {
top: 0;
height: 50px;
}
https://www.codeply.com/go/jYikJAul9j
Related
I'm sort of new to this, so please forgive me asking, but I'm using a slightly modified bootstrap navbar, and had the active class being properly assigned untill recently, but for some reason it stoped working with the last changes I made... (tried to revert it to see what screwed it up, to no avail...)
Could some gentle soul enlighten me on how to make it work as it should?
Cheers!
T.F.
view:
<nav class="navbar navbar-default">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">ACAC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">INÍCIO<span class="sr-only">(current)</span></li>
<li>NOTÍCIAS</li>
<li>PROJECTO</li>
<li>ACTIVIDADES</li>
<li>GALERIA</li>
<li>CONTACTOS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
EN
</ul>
</div>
</div>
</nav>
.....
<script>
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
Clicking on the menu page navigates to new page. Active menu is changed but when the page is reloaded to new page it is reset to default.
You can check the page on document.ready and set the menu active for that page -
if (window.location.href.indexOf("noticias") > -1) {
$(".nav").find(".active").removeClass("active");
$('.nav a[href$="http://www.base_url.com/notice"]').parent().addClass("active");
}
change http://www.base_url.com/ to your actual base url.
This is your code with hrefs removed and li content changed
none of my edits changed how you code works, and it seems to work fine
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">ACAC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
EN
</ul>
</div>
</div>
</nav>
.....
<script>
$(".nav a").on("click", function() {
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Okay so I'm trying to create a navbar that collapses the hamburger menu when a link is closed. The problem is the method I'm using also opens the hamburger menu when I click a link. This is okay with all the regular links in the navbar. But I do not want this to happen with the navbar-brand. I need it to only collapse the menu when it's opened. However, even when the menu is closed the navbar-brand on click will open it.
here is the code, I tried all sorts of javascript but I think I need help with my specific situation.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT</li>
<li>CLOUD</li>
<li>HIPAA</li>
<li>SECURITY</li>
<li>CONTACT US</li>
<li>ABOUT</li>
</ul>
</div>
<!-- End Links -->
</div>
You can hook up to the click event of the hamburger and reset the css classes on the menu
$('.navbar-brand').click(function() {
$('.navbar-toggle').attr('aria-expanded', false);
$('.navbar-toggle').addClass('collapsed');
$('.navbar-collapse').attr('aria-expanded', false);
$('.navbar-collapse').addClass('collapse');
$('.navbar-collapse').removeClass('in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar">
<img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" />
</a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT
</li>
<li>CLOUD
</li>
<li>HIPAA
</li>
<li>SECURITY
</li>
<li>CONTACT US
</li>
<li>ABOUT
</li>
</ul>
</div>
<!-- End Links -->
</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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
I am using bootstrap for my responsive navbar on mobile view.
When I click the button and the navbar menu is display from top to down.
What should I do to can make it from left to right?(Remember to resize your windows to mobile size).
You can check out this popular Bootstrap fork available: Jasny Bootstrap
It has the same slide in from left effect.
<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
You need to override following two properties to archive this. Here you should also use pull-left bootstrap class, this class element move into left side only but doesn't set margin. I thought you should override base on the requirement.
.nav-left{
float: left !important;
margin: 8px 15px !important;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed nav-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
With the Jasny Bootstrap slide-in plug-in, the default class is "navmenu-fixed-left". You can change the class to "navmenu-fixed-right" to make the menu slide in from the right side:
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li>About</li>
<li>Capabilities</li>
</ul>
</div>
If you also want the toggle button to appear on the right side, you need to adjust some CSS:
.navbar-default .navbar-toggle-box {
float: right;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
position: absolute;
right: 0;
}
Bootstrap JS/CSS is appending transparent space to the bottom of a NavBar inside a <td> in my home page. This shows a live preview of the issue I'm having with the default bootstrap configuration of NavBars.
Here is a complete, (minus the inclusion of the bootstrap files) and minimal example of the code I wrote to create the NavBar.
<html>
<body>
<table align="center" border="1px"><tr>
<td>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="index.html">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
<form class="navbar-form navbar-right" 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>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</td></tr>
</table>
</html>
Any help is appreciated.
Cheers.
You can update the css class "navbar" with updated margin.
.navbar { margin-bottom: 0 }
Fiddle: http://jsfiddle.net/kiranvarthi/jmJWr/24/
The cleanest solution for this is, when you export your boostrap version from here, just edit the #navbar-margin-bottom field, you should set it to 0px insted of #line-height-computed (default value).
I'm trying to get the sticky bootstrap menu to work on desktops. When i scroll down to a certain div element i want the sticky menu to appear BUT when the user scrolls back up and past that div element i want the sticky menu to be hidden. Can't quite figure out whats going on.
<!--sticky desktop menu-->
<div id="nav">
<div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" 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="/"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>PRICING</li>
<li>WATCH OUR VIDEO</li>
<li>REAL LIFE TESTIMONIALS</li>
<li>FAQ'S</li>
<li>ABOUT US</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Script below;
$('#nav').affix({
offset: {
top: $('.desktopSticky').height()
}
});
Site can be seen here: http://bit.ly/1i4VUxv
If you're ok doing it via scroll-position vs a defined div, this will work for you:
$(function() {
var div = $(".sticky");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
div.removeClass('hidden-lg').addClass("visible-lg");
} else {
div.removeClass("visible-lg").addClass('hidden-lg');
}
});
});
See the bootply: http://www.bootply.com/CGY86c9Baz
If you prefer it be activated by a specific div, I think scrollspy may be your solution, but I don't know how to make it work!