Change header text and logo colour when transparent (Broadcast Theme)

Solved

Change header text and logo colour when transparent (Broadcast Theme)

winstonmaz
Shopify Partner
5 0 0

Hi, my homepage has a transparent header but I need the hamburger menu, language selector and svg logo to be a different colour (#FCF9F4). This should only be on my homepage or when the header is transparent. Im using Broadcast theme.

My website is www.le-violon.ca

Password: coffee

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10860 2141 2276

This is an accepted solution.

Hi @winstonmaz 

Please add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code to do it

{% if template == 'index' %}
<style>
.header__wrapper:not(.js__header__stuck) .popout__toggle, .header__wrapper:not(.js__header__stuck) .header__mobile__hamburger {
   color: #FCF9F4;
}
.header__wrapper:not(.js__header__stuck) .header__logo__link {
   filter: brightness(0) saturate(100%) invert(88%) sepia(36%) saturate(184%) hue-rotate(310deg) brightness(108%) contrast(98%) !important;
}
</style>
{% endif %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

PageFly-Amelia
Shopify Partner
626 165 238

Hello @winstonmaz 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

 

header .popout__toggle, header .header__mobile__hamburger {
   color: #FCF9F4 !important;
}

header .header__logo__link {
   filter: brightness(0) saturate(100%) invert(88%) sepia(36%) saturate(184%) hue-rotate(310deg) brightness(108%) contrast(98%) !important;
}

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @winstonmaz

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_1-1717989134445.png

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tags

BSSCommerceHDL_0-1717989116831.png

button.header__mobile__hamburger.caps, 
form[action="/localization"] .popout__toggle span
{
    color: #FCF9F4 !important;
}

.logo__img.logo__img--transparent {
    filter: brightness(0) saturate(100%) invert(88%) sepia(36%) saturate(184%) hue-rotate(310deg) brightness(108%) contrast(98%) !important;
}

body:has(.header__wrapper.js__header__stuck) button.header__mobile__hamburger.caps, 
body:has(.header__wrapper.js__header__stuck) form[action="/localization"] .popout__toggle span
{
    color: #212121 !important;
}

Here is result: 

BSSCommerceHDL_2-1717989205173.png

Hope this can help you,

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Dan-From-Ryviu
Shopify Partner
10860 2141 2276

This is an accepted solution.

Hi @winstonmaz 

Please add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code to do it

{% if template == 'index' %}
<style>
.header__wrapper:not(.js__header__stuck) .popout__toggle, .header__wrapper:not(.js__header__stuck) .header__mobile__hamburger {
   color: #FCF9F4;
}
.header__wrapper:not(.js__header__stuck) .header__logo__link {
   filter: brightness(0) saturate(100%) invert(88%) sepia(36%) saturate(184%) hue-rotate(310deg) brightness(108%) contrast(98%) !important;
}
</style>
{% endif %}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.