Brooklyn - Disable inversion of logo for a specific page

Tourist
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?

 

Thanks!

Pelle

0 Likes
Shopify Partner
1169 135 206

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

Sergiu Svinarciuc | CTO @ visely.io
- 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 visely.io or our blog
0 Likes

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. 

 

Cheers 
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 www.inspiresmallbusiness.com

0 Likes
Tourist
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">	

to

 

 

       <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: https://lesartsnoirs.com/

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);       
        padding-top:0;
        margin-top:0px;
        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;
}
0 Likes
Shopify Expert
84 14 16

hi @Pelle 

 

Please share a screenshot what problem you are facing.

 

Thank you.

0 Likes