Remove focus from Bootstrap nav - javascript

I have a bootstrap nav menu like this
<nav class="navbar navbar-default navbar-fixed-top">
<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 alt="Brand" src="img/pluck.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.nav-collapse -->
</div>
</nav>
When I tap it, make no selection and tap it again it stays focused.
I would like the button to blur when the menu collapses. So I have tried
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
})
I have also tried .navbar-toggle but the menu button still stays focused. How to make the menu button blur.

There seemed no way to do this (on mobile) so I just added and removed the background as required.
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
$('.navbar-toggle').css("background-color","#f8f8f8");
})
$('#navbar').on('show.bs.collapse', function () {
$('#navbar').focus();
$('.navbar-toggle').css("background-color","#ccc");
})

You need to click somewhere else to remove it's focus, Try this...
$('#navbar').on('hidden.bs.collapse', function () {
$('body').click();
})

Related

drop down hamburger not working

I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:
<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
Then, add some script:
function toggleMenu() {
let menu = document.getElementById('menu');
menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does
}
After that, you'll have to add some CSS to style your menu for when it's opened.
Looks fine to me, just be sure that your view width is less than 768px, otherwise the hamburger will be hidden.

how to add menu to toggle navigation bar in bootstrap

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 :)

navbar is not working on resizing the window

<nav class="navbar navbar-default" role="navigation" id="my-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand-centered navbar-brand ">
<a href="#" class="navbar-brand">
<img alt="Brand" src="assets/img/logo.png">
</a></div>
</div>
<div class="collapse navbar-collapse" id=" navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> MyReservations
</li>
<li> +919986040064 </li>
<li> saritha#myotels.com
</li>
</ul>
</div>
</div>
</nav>
I am using this navbar. On resizing the window the toggle button appears but nothing happens on clicking on it. Is there is any coding mistake. I have included bootstrap.min.css and bootstrap.min.js and jquery.js files but still the problem is not resolved
You need to change the data-target to #navbar-collapse by the looks of it:
<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>
You were targeting a different element (#navbar-brand-centered) which is where your logo is located, not your menu...
data-target of <button> must be same with id of <div class="collapse navbar-collapse" and another way to resolve this issue, to change id:
<div class="collapse navbar-collapse" id="navbar-brand-centered">
it will work too!
jsfiddle-link

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>

Angular UI & Bootstrap: Collapse Mobile Navbar on Link Click

I have a functioning bootstrap navbar through use of ui.bootstrap of Angular-UI. For the mobile navbar, I want the navbar to collapse when a link is clicked. The toggle button functions as expected, but I can't get the ng-click="isCollapsed = !isCollapsed" to work on the nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
App
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}" ng-click="isCollapsed = !isCollapsed">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
In my controller, the applicable code is:
$scope.isCollapsed = true;
I had the same issue. Not sure if this is the best solution but I just added this in the main controller:
$rootScope.$on('$stateChangeStart', function(event, toState){
$scope.navbarCollapse = true;
});
It doesn't exactly do what you ask, because it's not triggering the collapse on click event. But it does trigger the collapse on each state change which for this purpose is the same.

Categories