FROM CACHE - en_header

i want my logo to change from white to black on scroll header - brooklyn theme

7kingodmsla
Trailblazer
222 0 39

Screen Shot 2022-04-15 at 2.10.47 AM.pngi currently have a transparent header and sticker header installed on my brooklyn theme its just my logo is only black , i want to be able to change the logo colors on scroll any solutions ?

Replies 9 (9)
Zworthkey
Shopify Partner
5581 642 1525

@7kingodmsla 
you have so much queries,
Kindly hire a developer.

Thank you

7kingodmsla
Trailblazer
222 0 39

these questions have to be asked . others are asking as well

JohnFromJotting
Shopify Partner
665 94 129

Hi @7kingodmsla,

 

So you need to understand javascript here.

 

2 Things, you add 2 pictures for the logo upload, one for the black and other white. Then you use javascript to interchange between the 2.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

7kingodmsla
Trailblazer
222 0 39

Hey John ,  i have both uploaded already , actually have everything squared away besides being able to interchange between the two

JohnFromJotting
Shopify Partner
665 94 129

Hi @7kingodmsla now you need to do the magic of frontend using javascript. I don't know what brooklyn does, but I assume when it scrolls the transparent header goes away. Use this trigger to interchange between the 2 logos - one is shown other is hidden. 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

7kingodmsla
Trailblazer
222 0 39

if you have a link to verified solution this would be great. 

JohnFromJotting
Shopify Partner
665 94 129

Hi @7kingodmsla,

 

There's no "link" per say, you need to understand how javascript works/how to develop using javascript. Unfortunately this request would be too unique for someone to have a solution done out there. You'll need to educate yourself or as someone suggested above, hire someone.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

SHIBdev
Shopify Partner
334 24 91

try using something similar to this,

 

// Javascript
// jQuery to collapse the navbar on scroll
const $window = $(window);

$window.on('scroll', function() {
  let scroll = $window.scrollTop();
  if (scroll > 20) {
    $(".fixed-top").addClass("top-nav-collapse");
    //$("img.logo-image").attr('src', "images/master_logo_black.svg");
  } else {
    $(".fixed-top").removeClass("top-nav-collapse");
    //$("img.logo-image").attr('src', "images/master_logo_gold.svg")
  }
});
PaulNewton
Shopify Partner
4765 390 1021

This depends on theme and current code but can often be handled with a CSS rule that works with a custom class some sticky headers apply to the body tag as the site scrolls.

 

Find that class on the body tag then search for CSS solutions to invert colors to synthesize a non-javascript solution

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com