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