We can create desktop navbars using SpectrumStylr.
<div class="nav-desktop">
<a class="nav-desktop-item nav-desktop-link nav-desktop-brand" href="#">...</a>
<a class="nav-desktop-item nav-desktop-link" href="#">...</a>
<a class="nav-desktop-item nav-desktop-link" href="#">...</a>
<div class="hover-all">
<a class="nav-desktop-link nav-desktop-item" href="#">...</a>
<div class="hover-content">
<a class="hover-link">...</a>
<br>
<a class="hover-link">...</a>
<br>
<a class="hover-link">...</a>
</div>
</div>
</div>
Note: You can specify "bg-light" or "bg-dark" along with the "nav-desktop" class if you're using the general theme.
But, desktop navbars won't look good on mobile devices. What do we do then? Simple, you just have to create a mobile navbar!
<div class="nav-mobile">
<a class="nav-mobile-brand">...</a>
<div class="nav-mobile-right">
<button class="btn" onclick="ShowContent()"></button>
<div class="nav-mobile-content" id="nav-mobile-content">
<a class="nav-mobile-link">...</a>
<a class="nav-mobile-link">...</a>
<a class="nav-mobile-link">...</a>
</div>
</div>
</div>