Where you can achieve what your competitors can’t

Shopify Customize Header Dropdown Menu (Dawn)

Benefits of Customizing The Header Dropdown Menu in Shopify

Implementing a tailored, brand‑aligned dropdown navigation unlocks a wide range of strategic advantages:

Visual Engagement

  • Establishes an immediate, polished first impression with bespoke typography, icons, and animations
  • Elevates the header’s visual hierarchy, guiding attention toward high margin collections
  • Breaks the mold of generic themes, reinforcing brand uniqueness through signature styling
  • Introduces subtle hover or slide in effects that keep the interface feeling modern and lively
  • Maintains visual harmony by matching dropdown colors and spacing to overall site aesthetics

Conversion Optimization

  • Surfaces best selling or seasonal products directly inside the dropdown for instant discovery
  • Promotes cross selling by featuring complementary items beneath primary categories
  • Decreases bounce rates by guiding visitors quickly to relevant content, reducing frustration
  • Increases average order value through embedded banners for free shipping thresholds or bundles
  • Accelerates purchase decisions by displaying live inventory badges or limited time tags in‑menu

Design & Implementation

  • Centralizes navigation logic in reusable Liquid/JSON templates for easy future edits
  • Leverages Shopify’s menu APIs, metafields, or dynamic sources for automated updates
  • Minimizes performance impact with lightweight CSS transitions and deferred asset loading
  • Offers full control over responsiveness different layouts for desktop, tablet, and mobile
  • Scales seamlessly for internationalization, allowing locale specific menus and currencies

CODE :

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

<style>
.header-wrapper .header__menu-item,
.header-wrapper .header__menu-item span,
.header-wrapper .list-menu__item,
.header-wrapper .header__active-menu-item,
.header-wrapper .header__menu-item.link,
.header-wrapper .header__menu-item.link--text,
.header-wrapper .header__submenu .header__menu-item {
  text-underline-offset: unset !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.header__menu-item::after,
.header__menu-item:after,
.header__active-menu-item::after,
.header__active-menu-item:after {
  display: none !important;
}

.onhow-submenu {
  border-radius: 12px;
  overflow: hidden;
  /* You can adjust the shadow color intensity here if you want */
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 8px;
  
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

details[open] > .onhow-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

details[open] > .onhow-submenu {
  margin-top: 8px;
}

.onhow-submenu .header__menu-item {
  border-radius: 8px;
  /* You can change the hover animation speed here if needed */
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 8px 14px;
  margin: 2px 0;
  white-space: nowrap;
}

.onhow-submenu .header__menu-item:hover,
.onhow-submenu .header__menu-item:focus {
  /* You can customize the hover background and text colors here */
  background-color: rgba(var(--color-foreground), 0.06);
  color: rgba(var(--color-foreground), 1);
}

.onhow-nav-item {
  position: relative;
}

.onhow-nav-item::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  /* You can change the underline thickness and color here */
  height: 2px;
  background-color: currentColor;
  transition: width 0.25s ease;
  transform: translateX(-50%);
}

.onhow-nav-item:hover::before,
details[open] > summary.onhow-nav-item::before,
.onhow-nav-item[aria-current="page"]::before {
  width: 100%;
}

.header__menu-item svg.icon-caret {
  transition: transform 0.25s ease;
}

details[open] > summary > svg.icon-caret {
  transform: rotate(180deg);
}

@media screen and (min-width: 750px) {
  .header__inline-menu > ul > li {
    position: relative;
  }

  .header__inline-menu > ul > li > details {
    position: relative;
  }

  .header__inline-menu > ul > li > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__inline-menu > ul > li > details > .onhow-submenu {
    left: 0;
    top: 100%;
    margin-top: 8px;
  }
  
  .onhow-submenu-parent {
    position: relative !important;
  }
  
  .onhow-flyout-submenu {
    position: absolute !important;
    /* You can adjust the spacing between parent menu and flyout here */
    left: calc(100% + 10px) !important;
    top: 0 !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
    background: var(--gradient-background) !important;
    /* You can adjust the shadow color and intensity here */
    box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
                0 2px 8px rgba(var(--color-foreground), 0.06) !important;
    min-width: 200px;
    z-index: 11;
    
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  
  .onhow-submenu-parent[open] > .onhow-flyout-submenu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  
  .onhow-submenu-parent > .header__menu-item .icon-caret {
    transform: rotate(-90deg);
    transition: transform 0.25s ease;
  }
  
  .onhow-submenu-parent[open] > .header__menu-item .icon-caret {
    transform: rotate(-90deg) !important;
  }
  
  .onhow-submenu-parent::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 20px;
    height: 100%;
    background: transparent;
  }
  
  .onhow-flyout-submenu::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 15px;
    width: 12px;
    height: 12px;
    background: var(--gradient-background);
    transform: rotate(45deg);
    /* You can adjust the arrow shadow here if you want */
    box-shadow: -2px 2px 3px rgba(var(--color-foreground), 0.05);
  }
}

@media screen and (min-height: 700px) {
  .onhow-submenu {
    /* You can adjust the maximum height for long menus here */
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    /* You can customize the scrollbar colors here */
    scrollbar-color: rgba(var(--color-foreground), 0.2) transparent;
  }
  
  .onhow-submenu::-webkit-scrollbar {
    width: 6px;
  }
  
  .onhow-submenu::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .onhow-submenu::-webkit-scrollbar-thumb {
    /* You can change the scrollbar thumb color here */
    background-color: rgba(var(--color-foreground), 0.2);
    border-radius: 6px;
  }
}

@media screen and (max-width: 749px) {
  .onhow-submenu {
    border-radius: 8px;
    box-shadow: none;
    /* You can customize the mobile border color here */
    border-left: 2px solid rgba(var(--color-foreground), 0.1);
    margin-left: 10px;
  }
  
  .onhow-submenu .header__menu-item {
    padding: 10px 14px;
  }
  
  .onhow-flyout-submenu {
    position: relative !important;
    left: 0 !important;
    box-shadow: none !important;
    /* You can customize the mobile submenu border color here */
    border-left: 2px solid rgba(var(--color-foreground), 0.1) !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
  }
  
  .onhow-flyout-submenu::before {
    display: none;
  }
}

.header__submenu.list-menu {
  border-radius: 12px;
  overflow: visible !important;
  /* You can adjust the dropdown shadow here */
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 8px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  function initializeFlyoutMenus() {
    const submenus = document.querySelectorAll('.header__submenu.list-menu');
    submenus.forEach(submenu => {
      submenu.classList.add('onhow-submenu');
    });
    
    const navItems = document.querySelectorAll('.header__inline-menu .header__menu-item');
    navItems.forEach(item => {
      item.classList.add('onhow-nav-item');
    });
    
    const menuItemsWithSubmenus = document.querySelectorAll('.header__submenu details');
    
    menuItemsWithSubmenus.forEach(menuItem => {
      menuItem.classList.add('onhow-submenu-parent');
      
      const childSubmenu = menuItem.querySelector('.header__submenu');
      if (childSubmenu) {
        childSubmenu.classList.add('onhow-flyout-submenu');
      }
    });
    
    setupMenuClosingBehavior();
  }
  
  function setupMenuClosingBehavior() {
    const firstLevelDetails = document.querySelectorAll('.header__inline-menu > ul > li > details');
    
    firstLevelDetails.forEach(detail => {
      detail.addEventListener('click', function(event) {
        if (event.target.closest('summary')) {
          firstLevelDetails.forEach(otherDetail => {
            if (otherDetail !== detail && otherDetail.hasAttribute('open')) {
              otherDetail.removeAttribute('open');
            }
          });
        }
      });
    });
    
    const flyoutDetails = document.querySelectorAll('.onhow-submenu-parent');
    
    flyoutDetails.forEach(detail => {
      detail.addEventListener('click', function(event) {
        if (event.target.closest('summary')) {
          event.stopPropagation();
          
          const parentSubmenu = detail.closest('.onhow-submenu');
          
          if (parentSubmenu) {
            const siblingFlyouts = parentSubmenu.querySelectorAll('.onhow-submenu-parent');
            siblingFlyouts.forEach(otherDetail => {
              if (otherDetail !== detail && otherDetail.hasAttribute('open')) {
                otherDetail.removeAttribute('open');
              }
            });
          }
        }
      });
    });
    
    document.addEventListener('click', function(event) {
      if (!event.target.closest('.header__inline-menu')) {
        const allDetails = document.querySelectorAll('.header__inline-menu details[open]');
        allDetails.forEach(detail => {
          detail.removeAttribute('open');
        });
      }
    });
    
    firstLevelDetails.forEach(detail => {
      detail.addEventListener('toggle', function() {
        if (!this.hasAttribute('open')) {
          const nestedFlyouts = this.querySelectorAll('.onhow-submenu-parent[open]');
          nestedFlyouts.forEach(flyout => {
            flyout.removeAttribute('open');
          });
        }
      });
    });
  }

  initializeFlyoutMenus();
  setTimeout(initializeFlyoutMenus, 500);
});
</script>

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}