Shopify themes, liquid, logos, and UX
i 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 ?
these questions have to be asked . others are asking as well
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
Hey John , i have both uploaded already , actually have everything squared away besides being able to interchange between the two
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
if you have a link to verified solution this would be great.
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
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")
}
});
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
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024