I recently decided to implement the BEM methodology in my application starting with the navbar. However, I encountered a problem where my nav items are not being displayed properly and the hamburger icon is appearing on the desktop version, which is incorrect.
Below is the code I have written:
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;
}
The link now works correctly.
Visit this jsfiddle for the Navigation Menu with BEM example: Navigation Menu with Bem
If you notice any issues in my code or have suggestions for improvement, please feel free to provide your feedback as I am still learning. Thank you!