Having trouble with my navbar functionality... After applying CSS styling, it loses responsiveness and remains open on smaller screens. Here is the code snippet.
HTML:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="big-bar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-el">
<div class="navbar-nav">
<a class="nav-item nav-link active flip" href="home.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link flip" href="mansion.html">Mansion</a>
<a class="nav-item nav-link flip" href="#third-div">Sacrificial Grounds</a>
<a class="nav-item nav-link flip" href="#fourth-div">Children of the Forest</a>
<a class="nav-item nav-link flip" href="#fifth-div">About</a>
</div>
</div>
</nav>
CSS:
body{
background-color: black;
}
.navbar {
background: rgba(0, 0, 0, 0) !important;
margin-top: 50px;
}
#navbar-el {
display: flex;
align-items: center;
justify-content: center;
}
#navbar-el a {
margin: 0 50px 0 50px;
font-size: 20px;
color: white;
}
#navbar-el a:link {
}
#navbar-el a:visited {
}
#navbar-el a:hover {
color: #ED8105;
}
#navbar-el a:active {
color: #ED8105 !important;
}
#navbar-el a:focus{
outline: none;
}