Brooklyn - Disable inversion of logo for a specific page

20 0 0

Hello guys, 


I added a fixed header with a white background to my home page.

The image in the slide beneath is black.

Now the header logo and icons aren't visible because they are inverted in relation to the black image (I think that's the way it works)

On all the other pages the header elements are black

Is there a way to override the inversion code, so that the header stuff don't invert on my home page?




Shopify Partner
1169 135 206

If you can share the URL to your store that would help.

Sergiu Svinarciuc | CTO @
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to or our blog

Hi Pelle


Brooklyn theme isn't the best free theme for this. Better ways to get around it. Reach out and I'll send you some more details. 


Clayton Bates 

P.S If you want a awesome , extremely detailed , Free website review that will blow your socks off check out this link HERE or

20 0 0

Hey guys,

thanks for you replies!


I managed to solve this in a probably unconventional way. Not a coder.

If anyone else is having the same problem I'll write it down.


In header.liquid there's an if-loop at about line 60.

I changed it from

<header class="site-header{% if request.page_type == 'index' %} hero--color-0{% endif %}" role="banner">	




       <header class="site-header{% if request.page_type == 'index' %} background: rgba( 25,25,25,0.8);{% endif %}" role="banner">



And I have no idea what's going on, and why assigning background: rgba( 25,25,25,0.8) makes the text and icons black.

But it will have to work for now..


Here's how it looks like at the time of writing this:

Header is now white with black text and icons on both home  page and the other pages.


Oh, and my sticky header is ripped off of the community somewhere and looks like this:


.header-wrapper {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
.site-header {
        background: rgba( 255,255,255,1);       
        border-bottom: 1px solid rgba( 200,200,200,.5);
        border-top: 1px solid rgba( 200,200,200,.5);
.main-content {
    margin-top: 90px;				/*			compensates for the sticky menu by moving all content down 		*/								
.product-single__meta.scroll-to-fixed-fixed {
    padding-top: 100px;
Shopify Expert
84 14 16

hi @Pelle 


Please share a screenshot what problem you are facing.


Thank you.