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

Solved

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

winstonmaz
Shopify Partner
2 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
8390 1651 1664

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 %}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

PageFly-Amelia
Shopify Partner
493 154 222

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!


PageFly - #1 Page Builder for Shopify merchants.


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


Optimize your store’s mobile shopping experience with the Blum theme.

BSSCommerce-HDL
Shopify Expert
1004 342 408

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 😍

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


B2B Solution & Custom Pricing | 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

Dan-From-Ryviu
Shopify Partner
8390 1651 1664

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 %}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.