Razwanul Ghani Rifat February 2016

Bootstrap nav menu. Close it on click to any of its item

I am using the following html code:

  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav list-inline">
        <li>
          <a href="#" v-on:click.prevent="showHomepage">
            <span class="btn btn-default btn-sm">Home</span>
          </a>
        </li>
        <!-- Other Items ..... -->
      </ul>
    </div>
  </nav>

How can i make the menu items closed when a li items is clicked on the small screen?

Answers


Paradoxetion February 2016

You could do it with jQuery easily:

  jQuery("document").ready(function(){      
    if (jQuery(".navbar-toggle").is(":visible")) { //check if menu button visible
      jQuery(".nav-menu li").click(function() {    
        jQuery(".navbar-toggle").trigger("click") // emulate click on menu button to close menu
      })
    }
  })

Post Status

Asked in February 2016
Viewed 1,509 times
Voted 10
Answered 1 times

Search




Leave an answer