Bootstrap navbar doesn't collapse

Question

I've searched and found many responses but none of them solve my problem. What's wrong with this code? Clicking will open menu but menu will NOT close when selecting item, although underlying content scrolls correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        section {padding-top: 50; padding-bottom: 100px; margin-top: 50px}
    </style>}
</head>
<body id="page_top" data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav id="mainNav" 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="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page_top">LOGO</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
               <li><a class="page-scroll" href="#support">Support</a></li>
               <li><a class="page-scroll" href="#training">Training</a></li>
               <li><a class="page-scroll" href="#about">About</a></li>
               <li><a class="page-scroll" href="#rates">Hours &amp; Rates</a></li>
               <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <header>Content for New header Tag Goes Here</header>
   <section id="support">Content for  id "support" Goes Here</section>
   <section id="training">Content for  id "training" Goes Here</section>
   <section id="about">Content for  id "about" Goes Here</section>
   <section id="rates">Content for  id "rates" Goes Here</section>
   <section id="contact">Content for  id "contact" Goes Here</section>
<footer>
   <p>
        &copy;2017 
    </p>
</footer>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</body>
</html>

The code is working fine: http://www.codeply.com/go/hqEj1XMO2Q — Carol Skelly, Mar 10 '17 at 23:31
I followed your link and it does NOT work there. I changed viewport to smartphone and clicking on menu then any item does NOT close the menu. — Ken, Mar 11 '17 at 15:53
The menu works as expected. The nav links are NOT designed to close the navbar after click.. This question is a duplicate of: http://stackoverflow.com/a/28684484/171456 — Carol Skelly, Mar 11 '17 at 16:03
Another duplicate for reference: http://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click — Carol Skelly, Mar 11 '17 at 16:06
@ZimSystem Thanks. I reread the links and finally discovered the solution was just to add the data-toggle="collapse" data-target=".navbar-collapse.in" to each tag. This is the simplest solution buried with all the custom Javascript solutions in the assortment of posts on this issue. — Ken, Mar 12 '17 at 17:41

score -1 · Answer 1 · answered Mar 11 '17 at 03:59

-1

If you want the item menu to close the menu when it is triggered, you must create a double menu, one visible, one hidden.

<li><a class="page-scroll hidden-xs" href="#support">Support</a></li>
<li><a class="page-scroll visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#support">Support</a></li>

The first one will act normal.

When you go XS, the first item is hidden and the second one is displayed. Note that the second one has COLLAPSE command for the menu.

Try it, works fine!

EDITED

You can achieve that through JavaScript also, but this is the simplest method.

answered Mar 11 '17 at 03:59

kold-kreator

179
2
2
12

This "works", but will cause an undesirable flicker when the navbar links are clicked on wider sceens. – Carol Skelly Mar 11 '17 at 16:29
@ZimSystem Here works fine on every size or resolution screen. – kold-kreator Mar 14 '17 at 20:19
@Ken If it works as expected, please upvote my answer. – kold-kreator Mar 14 '17 at 20:20

Bootstrap navbar doesn't collapse

1 Answers1