Remove focus from Bootstrap nav

Question

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.

Answer 1

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

Answer 2

You need to click somewhere else to remove it's focus, Try this...

$('#navbar').on('hidden.bs.collapse', function () {
 $('body').click();
})