how to add menu to toggle navigation bar in bootstrap - javascript

So here's what I want to do,
add login/signup(when logged out) add profile/logout(when logged in) in toggle navigation menu when my web is in mobile version(xs).
I don't want anything when my web is in desktop version(sm,md, lg, xl)
I have code like this right now
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<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="{% url 'index' %}">MyWeb</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">
</ul>
I need to add
{% if user.is_authenticated %}
profile<i class="fa fa-user"></i></li>
<li>else
{% else %}
<li>signin<i class="fa fa-registered"></i></li>
<li>login<i class="fa fa-sign-in"></i></li>
{% endif %}
how do I do this?
I don't want anything when it's in desktop version, I just want to simply put these when it's in xs and I get toggle nav menu

Try this :
<nav class="navbar navbar-default visible-xs-block">
Also, for your reference you can find other option from Bootstrap viewport breakpoints
Hope it helps :)

Related

How to Add Affix to Bootstrap Fixed Bottom Navbar

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

Add active class to nav bar

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>

Nav bar collapse menu is not working on mobile and table viewport

I have and issue with bootstrap3 navbar-menu on a smaller viewport. When I go to response mode in inspector and click on a hamburger icon I don't see any interaction, debug tool is not showing any error, and I have all standard bootstrap3 navbar collapse class code to support smaller viewport, I'm just overlooking something.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="{% url 'index' %}"><img src="static/img/SNYClogo.png" height=50 width=110></a>
</div>
<div class="navbar-collapse collapse">
<ul id="navbar" class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Can someone please check this JSFIDDLE, and inspect mine code.
Give .navbar id to parent div not ul.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#"><img src="..." height=50 width=110></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Fiddle

How to collapse navbar menu on click ONLY, not open, having trouble figuring this one out

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>

bootstrap navbar mobile toggle not working

I loaded bootstrap css and js files and added the html code of following.
Both are succesfully loaded - css in head tag and js below footer. Other functions are also working fine.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container container-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="{{ url_for('public.home') }}">
NekTime
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
{% if current_user and current_user.is_authenticated() %}
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
</li>
<li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>
</ul>
{% elif form %}
<ul class="nav navbar-nav navbar-right">
<li>Create account</li>
</ul>
<form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.username(placeholder="Username", class_="form-control") }}
{{ form.password(placeholder="Password", class_="form-control") }}
</div>
<button type="submit" class="btn btn-default">Log in</button>
</form>
{% endif %}
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
When I shrink the browser, the toggle button replaces other menus, but I cannot expand that toggle button.
I managed to get the right data-target.. i don't know what to do next
I added the collapsed class in the button tag, and it works. Look the following code.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse">
It worked the next day..when I changed the code for loading jquery. Guess the previous code to bring jquery did not work properly.

Categories