Shopify themes, liquid, logos, and UX
Hi,
I have been trying to change the color of the header icons on the Dawn theme, but no luck. In the recent Dawn theme, I can just change the menu color of the theme and it would change it, however, with the one I have it doesn't do that.
How can I change the color of the header icons?
Thanks!
Sincerely,
Edwin
Hi @Edwin_Wu
All the menu, you like to change the color?
If it is check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header__menu-item span {
color: red;
}
And Save.
If it doesnt work, would you mind to share your store URL? Thanks!
Hello.
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hi @Edwin_Wu , you can change header's transparency on scroll down by following these steps:
1. Navigate to Online store => Themes => Edit code
2. Find base.css file on Assets folder and add this code to the end of the file :
.header__active-menu-item, .header__menu-item, .header__menu-item:hover {
/* Color of header icons you want */
color: yellow;
}
.header__active-menu-item:hover, .header__menu-item:hover {
/* Color of header icons you want while hovering */
color: green;
}
Here is the result :
We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.
SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
This is Noah from PageFly - Shopify Page Builder App
Hi @Edwin_Wu You can change color header by add code here:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
.header__inline-menu ul li a{
color: gray !important;
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025