How to setup main menu

The main menu can be customized from the partial file app/_overlaymenu.html.

If you are not using NPM, you will find the menu inside the <body> .

The first menu that appears in the markup  is the usual menu that links to the HTML pages

 <div class="st__navOverlay--menuWrapper-inner left-menu-overlay">
  <ul class="st__navOverlay--mainNav ovr-menu">
   <li class="ovr-menu__item"><a href="index.html">Home</a></li>
   <li class="ovr-menu__item"><a href="about.html">About</a></li>
   <li class="ovr-menu__item"><a href="shop.html">Shop</a></li>
   <li class="ovr-menu__item"><a href="blog.html">Blog</a></li>
   <li class="ovr-menu__item"><a href="checkout.html">Checkout</a></li>
   <li class="ovr-menu__item"><a href="contact.html">Contact</a></li>
  </ul>
 </div><!--/.st__navOverlay-menuWrapper-inner -->

The second part of the menu consists of the multi-level menu.

 <nav id="ml-menu" class="menu">
  <div class="menu__wrap">
   <ul data-menu="main" class="menu__level" tabindex="-1" role="menu" aria-label="All">
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-1" aria-owns="submenu-1" href="#">NEW IN</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-2" aria-owns="submenu-2" href="#">CLOTHING</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-3" aria-owns="submenu-3" href="#">SHOES</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-4" aria-owns="submenu-4" href="#">ACCESORIES</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-5" aria-owns="submenu-2" href="#">ACTIVEWEAR</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-6" aria-owns="submenu-1" href="#">FACE-BODY</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-7" aria-owns="submenu-2" href="#">GIFTS</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-8" aria-owns="submenu-1" href="#">OUTLET</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-9" aria-owns="submenu-2" href="#">BRANDS</a></li>
    <li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-10" aria-owns="submenu-10" href="#">INSPIRATION</a></li>
   </ul>
..

</div>
</nav>

If a menu item has a submenu multi-level then the item should have the data-submenu="submenu-1-1" aria-owns="submenu-1-1" completed with the id of the new multi-level menu.

How to change the colors

RELATED ARTICLES

RECENT INCIDENTS