Get Responsive navbar menu to Automatically close after anchor link clicked

Get Responsive navbar menu to Automatically close after anchor link clicked

In this Post We Will Explain About is Bootstrap Mobile navbar toggle collapse after click, With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How to hide my collapse bootstrap 3 navbar ExampleExample

In this post we will show you Best way to implement javascript – Bootstrap close responsive menu “on click”, hear for Responsive navbar collapse for single page applicationswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :  How to Integrate Google No CAPTCHA reCAPTCHA using VueJS

Markup Languages(index.html) HTML Part

<nav class="navbar">
    <div class="container">
     <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle pull-right collapsed" type="button">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
      </button>
      <div class="logo pull-left">
       <a href="index.html" class="navbar-brand main_logo">
        <img class="img-responsive" src="images/logo-main.png" alt="logo-main" />
       </a>
       <a href="index.html" class="navbar-brand min-logo">
        <img class="img-responsive" src="images/logo-mini.png" alt="logo-mini" />
       </a>
      </div>
     </div>
     <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
       <li>
        <a href="#service">Information</a>
       </li>
       <li>
        <a href="#blog">Invest</a>
       </li>
       <li>
        <a href="#contact">Contact Us</a>
       </li>
       <li>
        <a href="javascript:;" onclick="document.getElementById('level00s').style.display='block'">Login / Register</a>
       </li>
      </ul>
     </div>
    </div>
   </nav>

Example 1 : javascript – How to close an open collapsed navbar when clicking

jQuery('.nav a').on('click', function(){
 jQuery('.navbar-collapse').removeClass("in");     
});

Example 2 : jquery – Hide Twitter Bootstrap nav collapse on click

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x by Richard
});

Example 3 : Responsive navbar collapse for single page applications

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

Example

Also Read :  Send, Get data redirect route with parameters in laravel

I hope you have Got What is Responsive navbar collapse for single page applications And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

frontaccounting Customization create module form Components
frontaccounting Customization create module form Components In this Post We Will Explain About is frontaccounting Customization create module form Components With