i want it to glow when i hover on it, instead of changing colour!
URL: https://szk08y-x1.myshopify.com/
Topic summary
A Shopify store owner wants their header navigation menu to glow on hover instead of changing color. The site currently shows the menu items disappearing or changing appearance unexpectedly when hovered.
Proposed Solutions:
- Initial suggestion: Add CSS code to
style.cssfile targeting.main-menu ul li:hover>awith white color - Challenge: The theme doesn’t contain a
style.cssfile - Alternative attempts: Adding code to
skin-and-color.cssat line 569 (unsuccessful) - Latest recommendation: Insert CSS into
base.cssfile with color code#f0dcce(or#fffffffor white), which can be customized
Current Status:
The issue remains unresolved. The user reported that previous CSS solutions haven’t worked. Screenshots show the theme’s file structure and the hover behavior problem. The discussion is ongoing with participants troubleshooting the correct file location and CSS syntax for the specific theme being used.
Hello @Emiway1
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> style.css
add this code at the end of the file and save.
.main-menu ul li:hover>a, {
color: #fff !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
add this code in this file
skin-and-color.css – line number 569
Still Not Working
Hello @Emiway1 ,
Here are the steps to apply the necessary changes in your Shopify store:
- In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
- Locate Asset > base.css and paste the following code at the bottom of the file:
.main-menu ul li:hover>a, .main-menu ul li.active>a {
color: #f0dcce !important;
}
You can change the color according to your requirements. (If you want to keep the white color, set the color code #ffffff)
Let me know if you need further assistance!