Help with Transparent Header Link Colour (Expanse Theme)

Solved

Help with Transparent Header Link Colour (Expanse Theme)

Ked
Shopify Partner
11 2 3

https://xsx07tzh6x4n0dkc-50820350128.shopifypreview.com

 

I need help changing the colour of the links to the transparent header to black. The theme doesn't give me that ability

Screenshot 2024-09-18 at 9.47.53 AM.png

Accepted Solutions (2)

Tech_Coding
Shopify Partner
309 80 71

This is an accepted solution.

Hello @Ked 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
    header ul.site-nav li a, summary {
       color: #000 !important;
   }
</style>

Tech_Coding_0-1726649611398.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

BSSCommerce-B2B
Shopify Partner
1729 518 582

This is an accepted solution.

@Ked ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
.site-nav.site-navigation * {
  color: #000!important;
  font-weight: 500!important
}
</style>

Result:

 

BSSCommerceB2B_1-1726649743275.png

If it helps you, please like and mark it as the solution.

Best Regards 😍

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


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

View solution in original post

Replies 5 (5)

Tech_Coding
Shopify Partner
309 80 71

This is an accepted solution.

Hello @Ked 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
    header ul.site-nav li a, summary {
       color: #000 !important;
   }
</style>

Tech_Coding_0-1726649611398.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

BSSCommerce-B2B
Shopify Partner
1729 518 582

This is an accepted solution.

@Ked ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
.site-nav.site-navigation * {
  color: #000!important;
  font-weight: 500!important
}
</style>

Result:

 

BSSCommerceB2B_1-1726649743275.png

If it helps you, please like and mark it as the solution.

Best Regards 😍

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


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

Ked
Shopify Partner
11 2 3

Thanks! it works but would prefer if it affects the cart button and Account button

 

Like so 

 

Screenshot 2024-09-18 at 10.19.59 AM.png

Tech_Coding
Shopify Partner
309 80 71

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .site-nav__icons>.site-nav__link--icon {
      color: #000 !important;

      font-weight: 500 !important
  }
</style>

Tech_Coding_0-1726651901295.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
BSSCommerce-B2B
Shopify Partner
1729 518 582

@Ked , change the previous code simply like this

 

<style>
.site-nav * {
  color: #000!important;
  font-weight: 500!important
}
</style>

 

Result:

BSSCommerceB2B_0-1726651862223.png

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


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