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>