Cannot change color of header icons in Dawn theme

Cannot change color of header icons in Dawn theme

Edwin_Wu
New Member
4 0 2

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.

Edwin_Wu_0-1719069590333.png

 

How can I change the color of the header icons?

 

Thanks!

 

Sincerely,

 

Edwin

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
9870 2351 2948

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

BSS-TekLabs
Shopify Partner
2401 695 830


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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-TA
Shopify Partner
124 24 24

Hi @Edwin_Wu , you can change header's transparency on scroll down by following these steps: 

1. Navigate to Online store => Themes => Edit code

1.png

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 :

BSSCommerceTA_0-1719073817640.png

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.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

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


BSS Commerce - Full-service eCommerce Agency

PageFly-Noah
Shopify Partner
1317 233 280

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.