Where you can achieve what your competitors can’t

Shopify Header Design / Dawn Theme Customization Tutorial

CODE : Normal Transparent without dropdown






.header-wrapper {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: transparent;
  border-bottom: none;
}

.header-wrapper .header {
  margin-top: 20px;
}

.header-shadow .header__menu-item span,
.header-shadow .header__heading-link span,
.header-shadow .header__icon svg {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}






CODE : Normal Transparent with dropdown & megamenu










.shopify-section-group-header-group .announcement-bar-section {
  position: relative;
  z-index: 20;
}

.header-wrapper {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: transparent;
  border-bottom: none;
}

.header-wrapper .header {
  margin-top: 20px;
}

.header-shadow .header__menu-item span,
.header-shadow .header__heading-link span,
.header-shadow .header__icon svg {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mega-menu__content,
.disclosure__list-wrapper {
  background: transparent !important;
  backdrop-filter: blur(10px);
}





CODE : Frosted GLASS Transparent Effect










.shopify-section-group-header-group .announcement-bar-section {
  position: relative;
  z-index: 20;
}

.header-wrapper {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: none;
}

.header-wrapper .header {
  margin-top: 20px;
}

.mega-menu__content,
.disclosure__list-wrapper {
  background: transparent !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
}

.search-modal__content {
  background: transparent;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}





CODE : Frosted GLASS Transparent Effect On SCROLL










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

<style>
.onhow-header-wrapper {
  background: white !important;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
  transition: all 0.3s ease;
}

.onhow-transparent-header {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 749px) {
  .onhow-header-wrapper {
    position: sticky;
    top: 0;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header-wrapper');
  
  if (header) {
    header.classList.add('onhow-header-wrapper');
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > 10) {
        header.classList.add('onhow-transparent-header');
      } else {
        header.classList.remove('onhow-transparent-header');
      }
    });
  }
});
</script>





CODE :  Header Dropdown Menu (Extra Level) + Show On Hover 





{% 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;
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 12px 8px 8px 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;
}

.onhow-submenu .header__menu-item {
  border-radius: 8px;
  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 {
  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;
  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%;
}

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

.onhow-dropdown-item::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.25s ease;
  transform: translateX(-50%);
}

.onhow-dropdown-item:hover::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 details {
    position: relative;
  }
  
  .header__inline-menu details::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 5px;
    background: transparent;
    z-index: 10;
  }

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

  .header__inline-menu details > .onhow-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0px;
  }
  
  .onhow-submenu-parent {
    position: relative !important;
  }
  
  .onhow-flyout-submenu {
    position: absolute !important;
    left: calc(100% + 5px) !important;
    top: 0 !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
    background: var(--gradient-background) !important;
    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: 12;
    
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  
  .onhow-flyout-submenu .onhow-flyout-submenu {
    z-index: 13;
  }
  
  .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu {
    z-index: 14;
  }
  
  .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu {
    z-index: 15;
  }
  
  .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu .onhow-flyout-submenu {
    z-index: 16;
  }
  
  .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: -5px;
    right: -8px;
    width: 15px;
    height: calc(100% + 10px);
    background: transparent;
    z-index: 10;
  }
  
  .onhow-flyout-submenu::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 15px;
    width: 12px;
    height: 12px;
    background: var(--gradient-background);
    transform: rotate(45deg);
    box-shadow: -2px 2px 3px rgba(var(--color-foreground), 0.05);
  }
}

@media screen and (min-height: 700px) {
  .onhow-submenu {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    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 {
    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;
    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;
    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;
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 12px 8px 8px 8px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  let hoverTimeouts = new Map();
  
  function initializeHoverMenus() {
    const submenus = document.querySelectorAll(".header__submenu.list-menu");
    submenus.forEach(submenu => {
      submenu.classList.add("onhow-submenu");
    });
    
    // Apply onhow-nav-item to main navigation items only
    const mainNavItems = document.querySelectorAll(".header__inline-menu .header__menu-item:not(.header__submenu .header__menu-item)");
    mainNavItems.forEach(item => {
      item.classList.add("onhow-nav-item");
    });
    
    // Apply onhow-dropdown-item to dropdown/submenu items
    const dropdownItems = document.querySelectorAll(".header__submenu .header__menu-item");
    dropdownItems.forEach(item => {
      item.classList.add("onhow-dropdown-item");
    });
    
    // Recursively find nested details elements (but skip first level)
    function addFlyoutClasses(container, isFirstLevel = false) {
      const details = container.querySelectorAll("details");
      details.forEach(detail => {
        const hasSubmenu = detail.querySelector(".header__submenu");
        if (hasSubmenu) {
          // Only add flyout classes to nested levels, NOT first level
          if (!isFirstLevel) {
            detail.classList.add("onhow-submenu-parent");
            hasSubmenu.classList.add("onhow-flyout-submenu");
          }
          // Recursively check this submenu for nested details
          addFlyoutClasses(hasSubmenu, false);
        }
      });
    }
    
    // Start from the main navigation - mark as first level
    const mainNav = document.querySelector(".header__inline-menu");
    if (mainNav) {
      addFlyoutClasses(mainNav, true);
    }
    
    setupHoverBehavior();
    setupClosingBehavior();
  }
  
  function setupHoverBehavior() {
    // Flexible selector: Find all details in main nav, then filter out nested ones
    const allDetails = document.querySelectorAll(".header__inline-menu details");
    const firstLevelDetails = Array.from(allDetails).filter(detail => 
      !detail.closest('.header__submenu')
    );
    
    firstLevelDetails.forEach(detail => {
      // MOUSEENTER: Open dropdown
      detail.addEventListener("mouseenter", function() {
        clearTimeout(hoverTimeouts.get(this));
        
        // Close other first-level dropdowns
        firstLevelDetails.forEach(otherDetail => {
          if (otherDetail !== detail && otherDetail.hasAttribute("open")) {
            otherDetail.removeAttribute("open");
          }
        });
        
        const timeout = setTimeout(() => {
          this.setAttribute("open", "");
        }, 150);
        hoverTimeouts.set(this, timeout);
      });
      
      // MOUSELEAVE: Close dropdown after delay
      detail.addEventListener("mouseleave", function() {
        clearTimeout(hoverTimeouts.get(this));
        
        const timeout = setTimeout(() => {
          const isHoveringDetail = this.matches(":hover");
          const mainSubmenu = this.querySelector(".onhow-submenu");
          const isHoveringSubmenu = mainSubmenu && mainSubmenu.matches(":hover");
          const hasOpenFlyouts = this.querySelector(".onhow-submenu-parent[open]");
          
          if (!isHoveringDetail && !isHoveringSubmenu && !hasOpenFlyouts) {
            this.removeAttribute("open");
            // Close all nested flyouts when main dropdown closes
            const nestedFlyouts = this.querySelectorAll(".onhow-submenu-parent[open]");
            nestedFlyouts.forEach(flyout => {
              flyout.removeAttribute("open");
            });
          }
        }, 400);
        hoverTimeouts.set(this, timeout);
      });
    });
    
    // Get ALL flyout details after classes have been assigned
    const flyoutDetails = document.querySelectorAll(".onhow-submenu-parent");
    
    flyoutDetails.forEach(detail => {
      // MOUSEENTER: Open flyout
      detail.addEventListener("mouseenter", function() {
        clearTimeout(hoverTimeouts.get(this));
        
        // Close sibling flyouts at same level
        const parentLi = this.closest("li");
        if (parentLi) {
          const siblingLis = Array.from(parentLi.parentElement.children).filter(li => li !== parentLi);
          siblingLis.forEach(siblingLi => {
            const siblingDetail = siblingLi.querySelector(".onhow-submenu-parent");
            if (siblingDetail && siblingDetail.hasAttribute("open")) {
              siblingDetail.removeAttribute("open");
            }
          });
        }
        
        const timeout = setTimeout(() => {
          this.setAttribute("open", "");
        }, 50);
        hoverTimeouts.set(this, timeout);
      });
      
      // MOUSELEAVE: Close flyout after delay
      detail.addEventListener("mouseleave", function() {
        clearTimeout(hoverTimeouts.get(this));
        
        const timeout = setTimeout(() => {
          const isHoveringDetail = this.matches(":hover");
          const flyoutSubmenu = this.querySelector(".onhow-flyout-submenu");
          const isHoveringFlyout = flyoutSubmenu && flyoutSubmenu.matches(":hover");
          const hasOpenChildFlyouts = this.querySelector(".onhow-submenu-parent[open]");
          
          if (!isHoveringDetail && !isHoveringFlyout && !hasOpenChildFlyouts) {
            this.removeAttribute("open");
            // Close all child flyouts when parent flyout closes
            const childFlyouts = this.querySelectorAll(".onhow-submenu-parent[open]");
            childFlyouts.forEach(childFlyout => {
              childFlyout.removeAttribute("open");
            });
          }
        }, 300);
        hoverTimeouts.set(this, timeout);
      });
    });
  }
  
  function setupClosingBehavior() {
    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");
        });
        
        hoverTimeouts.forEach(timeout => clearTimeout(timeout));
        hoverTimeouts.clear();
      }
    });
  }

  if (window.innerWidth >= 750) {
    initializeHoverMenus();
    setTimeout(() => {
      initializeHoverMenus();
      const allDetails = document.querySelectorAll(".header__inline-menu details");
      const firstLevel = Array.from(allDetails).filter(detail => !detail.closest('.header__submenu')).length;
      const flyouts = document.querySelectorAll(".onhow-submenu-parent").length;
      const mainNavItems = document.querySelectorAll(".header__inline-menu .header__menu-item:not(.header__submenu .header__menu-item)").length;
      const dropdownItems = document.querySelectorAll(".header__submenu .header__menu-item").length;
      console.log("OnHOW Navigation: Found", firstLevel, "main dropdowns,", flyouts, "flyout menus,", mainNavItems, "main nav items,", dropdownItems, "dropdown items");
    }, 500);
  }
});
</script>

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





CODE : GLOW Effect on Logo 





.header__heading-logo-wrapper img {
  transition: all 0.6s ease;
}

.header__heading-logo-wrapper:hover img {
  filter: brightness(1.35) contrast(1.2) 
          drop-shadow(0 0 8px rgba(2, 78, 201, 0.75))
          drop-shadow(0 0 12px rgba(2, 78, 201, 0.4));
}





CODE : Logo Animation CONSTANT ANIMATION 🔁





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

/* 1. CONTINUOUS PULSE Effect - Heartbeat animation */
.header__heading-logo {
  animation: onhowPulse 2s ease-in-out infinite alternate;
}
@keyframes onhowPulse {
  from { transform: scale(1); }
  to { transform: scale(1.056); }
}

/* 2. BREATHING Effect - Continuous fade in/out */
.header__heading-logo {
  animation: onhowBreathe 3s ease-in-out infinite alternate;
}
@keyframes onhowBreathe {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* 3. ELASTIC BOUNCE Effect - Continuous vertical bounce */
.header__heading-logo {
  animation: onhowBounce 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.08); }
}

/* 4. PENDULUM SWING Effect - Continuous rotation swing */
.header__heading-logo {
  animation: onhowSwing 3s ease-in-out infinite alternate;
}
@keyframes onhowSwing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* 5. FLOATING Effect - Gentle up/down movement */
.header__heading-logo {
  animation: onhowFloat 4s ease-in-out infinite alternate;
}
@keyframes onhowFloat {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}

/* ===== COMBINATION EFFECTS ===== */

/* COMBINATION 1: Pulse + Rotation - Dynamic movement */
.header__heading-logo {
  animation: onhowPulseRotate 3s ease-in-out infinite alternate;
}
@keyframes onhowPulseRotate {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.05) rotate(2deg); }
}

/* COMBINATION 2: Breathing + Float - Subtle organic feel */
.header__heading-logo {
  animation: onhowBreatheFloat 3.5s ease-in-out infinite alternate;
}
@keyframes onhowBreatheFloat {
  from { 
    opacity: 0.85; 
    transform: translateY(-3px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(3px); 
  }
}

/* COMBINATION 3: Bounce + Scale - Energetic movement */
.header__heading-logo {
  animation: onhowBounceScale 2.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}
@keyframes onhowBounceScale {
  from { transform: translateY(0) scale(0.98); }
  to { transform: translateY(-8px) scale(1.06); }
}

/* ===== THE MOST BALANCED EFFECT ===== */
/* Gentle pulse + subtle float - Professional yet engaging */
.header__heading-logo {
  animation: onhowGoldenMotion 4s ease-in-out infinite alternate;
}
@keyframes onhowGoldenMotion {
  from { 
    transform: scale(1) translateY(-1px); 
    opacity: 0.9; 
  }
  to { 
    transform: scale(1.03) translateY(1px); 
    opacity: 1; 
  }
}


/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .header__heading-logo {
    animation: none;
    transform: none;
    opacity: 1;
  }
}





CODE : Logo Animation On HOVER 👆🏻🖱️






/* 1. HOVER SCALE EFFECT- Used by 90% of sites */
.header__heading-logo {
  transition: transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.05);
}

/* 2. FADE-IN ON PAGE LOAD EFFECT- 80% adoption rate */
.header__heading-logo {
  opacity: 0;
  animation: onhowFadeIn 1s ease forwards;
}
@keyframes onhowFadeIn {
  to { opacity: 1; }
}

/* 3. SUBTLE BOUNCE/ELASTIC EFFECT- Trending animation */
.header__heading-logo {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.1);
}

/* 4. ROTATION WOBBLE EFFECT- 60% of modern sites */
.header__heading-logo {
  transition: transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: rotate(3deg) scale(1.02);
}

/* 5. GLOW/SHADOW EFFECTS - Emerging trend */
.header__heading-logo {
  transition: filter 0.3s ease, transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
  transform: translateY(-2px);
}

/* ===== EFFECTS COMBINATIONS  ===== */

/* COMBINATION 1: Scale + Rotation - Most versatile */
.header__heading-logo {
  transition: transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.05) rotate(2deg);
}

/* COMBINATION 2: Fade-in + Scale - Professional standard */
.header__heading-logo {
  opacity: 0;
  animation: onhowFadeScale 1s ease forwards;
  transition: transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.05);
}
@keyframes onhowFadeScale {
  to { opacity: 1; }
}

/* COMBINATION 3: Bounce + Glow - Modern creative approach */
.header__heading-logo {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              filter 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.08) translateY(-3px);
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.2));
}

/* Scale on hover + fade-in on load - Used by 80% of successful logos */
.header__heading-logo {
  opacity: 0;
  animation: onhowGoldenFade 0.8s ease forwards;
  transition: transform 0.3s ease;
}
.header__heading-link:hover .header__heading-logo {
  transform: scale(1.05);
}
@keyframes onhowGoldenFade {
  to { opacity: 1; }
}