Bootstrap 3 navbar not closing

HTML & CSS
1

I made a website for my son. When the page is not full width the navbar doesn’t shut. This is a link to the live page http://leggacysoccer.com What can I do to fix this? I’ve tried a few different things based upon searching Google but nothing seems to help.

https://codepen.io/mlegg10/pen/oeZKbr

<header id="navigation" class="navbar-fixed-top animated-header">
<div class="container">
<!-- Navigation -->
<div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile Toggle Button and stuff -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>

Menu <i style="font-size:24px" class="fa fa-arrow-circle-down"></i>
    </button>
    <a href="#" class="pull-left navbar-brand">Leggacy Soccer</a>
    </div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- End of mobile toggle button -->
    <!-- Start of the navbar -->
    <div class="collapse navbar-collapse" id="primary-navigation">
    <ul class="nav nav-justified">
    <li><a href="#top"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#lessons">Lessons</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="https://www.facebook.com/Leggacy-Soccer-1907852272813168/" target="_blank"><span class="fa fa-facebook"></a></li>
    <li><a href="https://twitter.com/LeggacySoccer" target="_blank"><span class="fa fa-twitter"></span></a></li>
    <li><a href="https://www.instagram.com/leggacysoccer/" target="_blank"><span class="fa fa-instagram"></a></li>
    </ul>
    </div>
    </div>
    </nav>
    </div>
    </header>

Custom css is here http://leggacysoccer.com/css/custom.css

2

Hi,

The menu seems to open and close on small screens ok and then disappears on large screens as expected.

What is the exact problem you are seeing or did I miss something?

Or have you fixed this now?

3

I was expecting that once you click on a menu item, about, lessons, contact, that the menu would close or slide up when the screen is not full screen.
This is what it looks like minimized

4

This is when you click on menu and it drops down, but once you click on one of the choices, it goes to the section but the menu stays open,

5

The menu will only close when you click the menu toggle bar. When you click a link in the menu the expected behaviour would be to navigate to a new page where the menu would automatically be closed and therefore not an issue.

As you are using fragment identifiers to visit ‘in-page’ links then you will have to add code to each menu item to toggle the closure of the menu yourself.

IIRC you can do that in bootstrap by using the data attributes like this:


 data-toggle="collapse" data-target="#primary-navigation"

e.g.

<ul class="nav  nav-justified">
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="#top"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="#about">About</a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="#lessons">Lessons</a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="#contact">Contact</a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://www.facebook.com/Leggacy-Soccer-1907852272813168/" target="_blank"><span class="fa fa-facebook"></span></a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://twitter.com/LeggacySoccer" target="_blank"><span class="fa fa-twitter"></span></a></li>
  <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://www.instagram.com/leggacysoccer/" target="_blank"><span class="fa fa-instagram"></span></a></li>
</ul

As you have a fixed top menu then when you jump to the link the h2 heading will be under the navbar so it may be worth using a media query for small screen and apply a little bit of top padding to the h2 so that you can see what section you are on (a little bit of vertical whitespace never hurt anyone).

@media screen and (max-width:768px){
 h2{padding-top:4rem;}	
}

You may need to be more specific with your rules if you don;t want that applied globally.

I also note that you have missing closing spans in the header and mis-matched header, footer, container and section tags. I believe your html should look like this:

<header id="navigation" class="navbar-fixed-top animated-header">
  <div class="container"> 
    <!-- Navigation -->
    <div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
      <nav class="navbar">
        <div class="container-fluid"> 
          <!-- Mobile Toggle Button and stuff -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> Menu <i style="font-size:24px" class="fa fa-arrow-circle-down"></i> </button>
            <a href="#" class="pull-left navbar-brand">Leggacy Soccer</a> </div>
          <!-- Brand and toggle get grouped for better mobile display --> 
          <!-- End of mobile toggle button --> 
          <!-- Start of the navbar -->
          <div class="collapse navbar-collapse" id="primary-navigation">
            <ul class="nav  nav-justified">
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="#top"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="#about">About</a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="#lessons">Lessons</a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="#contact">Contact</a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://www.facebook.com/Leggacy-Soccer-1907852272813168/" target="_blank"><span class="fa fa-facebook"></span></a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://twitter.com/LeggacySoccer" target="_blank"><span class="fa fa-twitter"></span></a></li>
              <li><a data-toggle="collapse" data-target="#primary-navigation" href="https://www.instagram.com/leggacysoccer/" target="_blank"><span class="fa fa-instagram"></span></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</header>
<!-- /.container --> 
<!-- Feature -->
<div class="container"> 
  <!-- Home Section -->
  <section  id="top" class="wow fadeInUp" data-wow-delay=".3s">
    <div class="container">
      <div class="row">
        <div class="col-lg-12"> <img src="http://leggacysoccer.com/images/LeggacySoccer_Logo.jpg" class="center-block img-responsive" alt="logo">
          <h1 class="text-center">Welcome to Leggacy Soccer</h1>
        </div>
      </div>
    </div>
  </section>
  
  <!-- About Section -->
  
  <section id="about" class="wow fadeInUp" data-wow-delay=".3s">
    <div class="container">
      <div class="row">
        <h2>About</h2>
        <div class="col-sm-6">
          <p>My name is Alex Leggett. I am currently enrolled at the University of New Hampshire in the Paul College of Business and Economics. My personal goal is to provide an opportunity to children who want to thrive at progressing their own skills and abilities.</p>
          <p>My prior experience includes coaching, refereeing, and playing 15 years. When I am not playing, I work as a substitute-teacher.
            I am looking to give private lessons to those interested regardless of age.</p>
          <p>Contact me for further information.</p>
        </div>
        <div class="col-sm-6"> <img src="http://leggacysoccer.com/images/Alex-shot.jpg" class="img-responsive" alt="Alex taking a shot"></div>
      </div>
      <div class="clearfix"></div>
    </div>
  </section>
  
  <!-- Lessons Section -->
  <section id="lessons" class="wow fadeInUp" data-wow-delay=".3s">
    <div class="container">
      <h2>Lessons</h2>
      <div class="row equal">
        <div class="col-sm-4">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <p>One On One Coaching</p>
              <p>1 hr $20.00</p>
            </div>
            <div class="panel-body">
              <p>Personalized one on one lessons focusing on improving technicalities, shooting, passing, dribbling, and more.</p>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <p>Package Deal</p>
              <p>1 hr $60.00</p>
            </div>
            <div class="panel-body">
              <p>Four lessons, one hour each.</p>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <p>Supreme Package Deal</p>
              <p>1 hr $100.00</p>
            </div>
            <div class="panel-body">
              <p>Eight lessons, spaced out according to your own schedule.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Contact Section -->
  <section id="contact" class="wow fadeInUp" data-wow-delay=".3s">
    <div class="container">
      <div class="row">
        <h2>Contact</h2>
        <div class="col-sm-6">
          <h3><i class="fa fa-user" aria-hidden="true"></i> Alex Leggett</h3>
          <p><i class="fa fa-globe" aria-hidden="true"></i> Dover, NH, 03820</p>
          <p><i class="fa fa-mobile" aria-hidden="true"></i> <a href="tel:603-953-4826">603-953-4826</a></p>
          <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:alex@leggacysoccer.com">Alex@LeggacySoccer.com</a></p>
        </div>
        <div class="col-sm-6">
          <div id="wufoo-zhgxjf810vugu8"> Fill out my <a href="https://leggacysoccer.wufoo.com/forms/zhgxjf810vugu8">online form</a>. </div>
          <script type="text/javascript">var zhgxjf810vugu8;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'leggacysoccer',
'formHash':'zhgxjf810vugu8',
'autoResize':true,
'height':'853',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { zhgxjf810vugu8 = new WufooForm();zhgxjf810vugu8.initialize(options);zhgxjf810vugu8.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script> 
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </section>
  <div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div>
  <footer> 
    <!-- Copyright etc -->
    <div id="footer">
      <p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> Leggacy Soccer</p>
      <div class="clearfix"></div>
    </div>
  </footer>
</div>
<!-- jQuery -->

Just run the page through the validator to find errors like the above.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.