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;
left:198px;
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
<script>
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 = Array.prototype.slice.call( items );
arr.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
}
</script>
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.
Leave feedback about this