How to add a hover effect to the header menu in the Shopify dawn theme?

How to add a hover effect to the header menu in the Shopify dawn theme?

header hover

You can easily add a hover effect on your navigation dropdown menus, in your Shopify website navigation bar in one particular theme called dawn theme.

Customers can easily navigate through the main navigation bar of your Shopify store by using the hover effect.

Here’s the way to include How to add a hover effect to Shopify’s main navigation bar:

Add Hover Effect on Main Navigation Bar

Step 1: make a duplicate of your current live theme

Go to the Online Store in your Shopify admin and then choose Themes. We advise you to create a replica of your current live theme for security reasons.

Select duplicate from the drop-down menu after clicking on Actions. Once the duplicate has been created, select Edit code from the Actions menu in your newly replicated theme.

Step 2: Assets directory

Search base.css or under the assets directory find base.css and click on it.

A new window should appear on the right side of the code editor. Add the following code to the bottom of this stylesheet:

					@media (min-width: 990px) {

.header__inline-menu details[open]>.header__submenu details ul {
position: absolute;
top: 0;
background: #fff;
box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));
border: 1px solid rgba(var(--color-foreground),var(--popup-border-opacity)); width:20rem;
.header__inline-menu details[open]>.header__submenu li {position:relative;}
.header__inline-menu details[open]>.header__submenu li:hover details ul {display:block}
.header__inline-menu details[open]>.header__submenu li:hover .icon-caret, .header__inline-menu details[open]>.header__submenu li .icon-caret {transform:rotate(-90deg)}
.product-detail-slider-row .slider-mobile-gutter {order:2;padding-left:15px;}
.product-detail-slider-row .thumbnail-slider {order:1;}
.product-detail-slider-row .thumbnail-slider .thumbnail-list>li {margin-bottom:15px;}


Step 3: Sections Directory

You also need to disable double-clicking for parent menus and submenus and apply the hover effect to menus and submenus(if submenus also have a child menu).

You need to apply a change in header.liquid:

					find this line in header.liquid file
</{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}>
once you will found out above line, paste below code after that line

  let details = navigator.userAgent;
  let regexp = /android|iphone|kindle|ipad/i;
  let isMobileDevice = regexp.test(details);
  if (isMobileDevice) {
      console.log("You are using a Mobile Device");
  } else {
      let items = document.getElementsByTagName("details");
      let arr = items );
      arr.forEach(item => {
        item.addEventListener("mouseover", () => {
          item.setAttribute("open", true);
          item.addEventListener("mouseleave", () => {

The above code will handle parent menu hover as well as child menu hover(if the child menu also has a submenu). The final output will look like this.


This 3-step code guide would help you with the hover effect to the main navigation of your Shopify website. Please don’t forget to add your feedback and review. Your feedback is always valuable and helps me to write more about such technical aspects in Shopify and other techs as well.

Facing problem to implement above code in your theme?

Don't worry i am here to help you. If you are facing problem then please write down in comment section, where you are stuck and also you can contact me.

Leave feedback about this

  • Quality
  • Price
  • Service


Add Field


Add Field
Choose Image