My navigation bar, created using bootstrap 4 and BEM methodology, is displaying the hamburger menu on desktop devices instead of being hidden. Can someone help me identify what's causing this issue?
If you want to take a look at the code, here is the link to the jsfiddle: Bem Navbar menu
HTML
<nav class="main-nav">
<div class="main-nav__logo">
<li class="main-nav__link">
<a>Majeni</a>
</li>
</div>
<button class="main-nav__toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="main-nav__icon navbar-toggler-icon"></span>
</button>
<div class="main-nav__collapse collapse" id="navbarNav">
<ul class="main-nav__list ml-auto">
<li class="main-nav__item--active">
<a class="main-nav__link" href="#">Home
<span class="main-nav__current sr-only">(current)</span>
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">About us</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">What we do</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Projects</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Contact</a>
</li>
</ul>
</div>
</nav>
css
.main-nav {
background-color: green;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: flex-end;
align-items: stretch;
height: 50px;
width: 100%;
&__item{
padding: 0 2em;
background-color: #088887;
display: flex ;
align-items: center;
}
&__link{
list-style-type: none;
list-style: none;
}
I would appreciate any suggestions or corrections if I am implementing something incorrectly in my code. Thank you!