Navigation

Stylizer offers you a responsive, CSS Only Navigation Bar, inspired by sty Menu.

---

<div id="sty" class="sty-<name-of-style>">
   <input type="checkbox" id="sty-checkbox" class="sty-checkbox">
   <div class="sty-menu <menu-alignement> sty-menu-dark">
     <ul class="sty-navigation">
       <li class="sty-header">
         <a class="sty-brand" href="#">Brand</a>
         <label class="sty-hamburger <hamburger-animation" id="sty-humburger" for"sty-checkbox"><span></span></label>
       <li>
       <li class="sty-item"><a href="#">item</a></li>
     </ul>   
   </div>
</div>

Adding menu items

The base module includes three menu items. You can have more by adding <li class="sty-item"><a href="#">Menu item name</a></li> to the sty-navigation list. Adding the classname active to the sty-item will make it visually selected. You can have multiple selected items.

Dropdown menu

Adding dropdown menus to your navbar is similar to adding normal items but instead you should use a nested element like this:

<li class="sty-item dropdown"><a href="#">Dropdown Menu</a></li>
  <ul>
    <li class="sty-item"><a href="#">Dropdown item1</a></li>
    <li class="sty-item"><a href="#">Dropdown item2</a></li>
  </ul> 
</li>       

Style Options

At the moment there are 4 available style options: sty-default, sty-static, sty-fixed, sty-fixed-bottom. To set this you have to change the class name in the base module from <name-of-style> to one of the listed options.

See the example below :

See the Pen Stylizer navigation style options by Amine (@Amine1992) on CodePen.

Color Option

There are 9 colors option see the pen below :

See the Pen Stylizer navigation color by Amine (@Amine1992) on CodePen.