Skip to content

Shadows Omega Menu Tutorial#

Description#

Follow the steps below to add the Colossus theme Omega Menu to the default Shadows framework version 10.00.00 and up.

Tutorial#

  1. Create a ReadyTheme Navigation Set with the following settings:
    • Code: omega-navigation
    • Name: Omega Navigation
    • Layout: Horizontal Dropdown (can be any value)
    • Template: omega-navigation.mvt
  2. Add Parent Categories along with child categories to the navigation set.
  3. Navigate to User Interface > CSS/JavaScript Resources > CSS Resources and select the extensions resources then select Edit Source and add the omega-navigation.css content at the bottom of the file.
  4. Navigate to User Interface > CSS/JavaScript Resources > JS Resources and select the extensions resources then select Edit Source and add the omega-navigation.js content at the bottom of the file.
  5. Edit the Global Header template to include following updates:
    • Include the button to trigger the menu: 
      <button class="c-button x-omega-navigation__trigger t-primary-link" data-hook="activate-omega" type="button">Shop Categories <span class="u-font-tiny u-icon-chevron-down x-omega-navigation__trigger-icon t-prevent-events"></span></button>
    • Include the ReadyTheme Navigation 
      <mvt:item name="readytheme" param="navigationset( 'omega-navigation' )" />
    • Comment out the default navigation 
      <div class="o-wrapper o-wrapper--full o-wrapper--flush u-bg-white t-site-navigation &mvte:global:Session:shadows:checkout_hidden;">
    <div class="o-layout o-layout--align-center o-layout--flush o-layout--justify-center t-site-navigation__wrap">
        <mvt:item name="readytheme" param="navigationset( 'primary_navigation' )" />
    </div>
</div>
      This template, global_header.mvt, includes the entire global header template based off Shadows Version 10.10.00
  6. Update the ReadyTheme Fasten Header Content Section
    • Add the menu button including the data-hook="open-omega" attribute: 
        <button data-hook="open-omega">Shop Categories</button>
    • Comment out the default navigation menu 
        <details class="x-fasten-header__navigation-element" tabindex="-1">
      <summary tabindex="-1"><span>Shop Categories</span></summary>
      <nav>
          <mvt:do name="l.result" file="g.Module_Library_DB" value="Runtime_CategoryList_Load_Parent( 0, l.settings:parent_categories )" />
          <ul class="x-fasten-header__navigation-list">
              <mvt:foreach iterator="parent" array="parent_categories">
                  <mvt:if expr="l.pos1 GT 5">
                      <mvt:foreachstop />
                  </mvt:if>

                  <mvt:do file="g.Module_Feature_URI_UT" name="l.settings:parent:link" value="Store_Category_URL(l.settings:parent, l.null)" />
                  <li class="x-fasten-header__navigation-item">
                      <a class="x-fasten-header__navigation-link" href="&mvte:parent:link;" tabindex="-1">&mvte:parent:name;</a>
                  </li>
              </mvt:foreach>
              <mvt:if expr="miva_array_elements(l.settings:parent_categories) GT 5">
                  <li class="x-fasten-header__navigation-item">
                      <a class="x-fasten-header__navigation-link" href="&mvte:urls:CTLG:auto;" tabindex="-1">Shop All</a>
                  </li>
              </mvt:if>
          </ul>
      </nav>
  </details>
      This template, fasten_header.mvt, includes the entire fasten header template based off Shadows Version 10.10.00