Bootstrap 3 navbar not closing

mlegg10 2017-08-08 23:50:17 UTC #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.

    <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

SkyC 2017-08-09 02:33:56 UTC #2

I had to make some changes to your code to get it to work in codepen:

removed all <script> and </script> elements from the JS Panel
moved all html from your <head> section and put it in Settings -> HTML -> Stuff for Head
Changed your link to jquerysctipttop.css to use HTTPS instead of HTTP

After that, the navbar showed up, but I wasn’t able to see the problem you’re experiencing. The mobile “Menu” button wasn’t working though. To fix that, I went to Settings -> JavaScript and dragged jQuery up to the top. Bootstrap.js is required for the mobile menu, and you had that added, but it was loading before jQuery. Bootstrap.js requires jQuery, so it needs to load after.

Anyway, maybe it’s just a matter of what order you are loading jQuery - make sure it loads before other libraries that use it. Here’s a fork of your codepen: https://codepen.io/anon/pen/YxVXaE

I hope it helps!

mlegg10 2017-08-09 15:22:27 UTC #3

thank you very much
it works as I wish now