maxum maxum - 3 months ago 18
Javascript Question

Remove focus from Bootstrap nav

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.

enter image description here

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.

Answer

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");
})
Comments