CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Paulo Roberto
Paulo Roberto

Reputation: 1548

Twitter Bootstrap nav collapse Hide on click

When I click on a menu item the menu does not close. I have already checked the imports of JS and CSS and seemingly everything is OK, is there something else I need to do to run the menu?

<!-- Fixed navbar -->
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

image

Upvotes: 1

Views: 728

Answers (4)

Ivan Karaman
Ivan Karaman

Reputation: 1234

for me works...

$(document).ready(function(){
  $('.navbar-collapse a').on('click', function(){
            $('.navbar-toggle').click();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <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">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 2

Praveen
Praveen

Reputation: 847

check this out

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<body>

<!-- Fixed navbar -->
<nav class="navbar  navbar-default  navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
    <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">
                <li class="active"><a href="#home" class="active scroll">Home</a></li>
                <li><a href="#about" class="scroll">Sobre</a></li>
                <li><a href="#services" class="scroll">Serviços</a></li>
                <li><a href="#testimonials" class="scroll">Opiniões</a></li>
                <li><a href="#gallery" class="scroll">Gallery</a></li>
                <li><a href="#news" class="scroll">News</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
  
</body>

Upvotes: 1

Neeraj Prajapati
Neeraj Prajapati

Reputation: 541

Try It, I think, it usefull.    

<nav class="navbar navbar-static-top">
     <div>
        <div class="navbar-header" >

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
            <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar line_orange"></span>
            <span class="icon-bar line_orange"></span>
           <span class="icon-bar line_orange"></span>
         </button>
        </div>

        <div id="navbar_logistic" class="navbar-collapse collapse">
        <ul class="nav navbar-nav flot_none">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Home2</a></li>
                 <li><a href="#">Home3</a></li>
                 <li><a href="#">Home4</a></li>


            </ul>
         </div>
        </div>
         </nav>

Upvotes: 1

Miguel Angelo Cacilhas
Miguel Angelo Cacilhas

Reputation: 91

I'm not certain, but i think it may be dependant on jquery ui... some bootstrap features are. I can't help much further with current knowledge of the question... I've been having a lot of trouble with imports too.. you can try checking on your browser debug console to be sure everything is being load, also.. on chrome: f12, tab sources.

I hope it has been helpful.

Upvotes: 1

Related Questions