I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
@media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.
