Style sticky header different than regular header in Brooklyn theme

Highlighted
New Member
11 0 0

Hello! I'm trying to figure out how to style the header in the Brooklyn theme different when the sticky header is active. I followed the directions here to implement the sticky header. I'm utilizing the logo and homepage logo options to show a white logo on the homepage (transparent header) and then a dark logo on the rest of the pages (white header background).

 

Here's what I'm trying to accomplish:

  1. When the user scrolls down on the homepage and activates the sticky header, I want to show the styling from normal header on the other pages (white background, dark logo and dark nav links).
    Screen Shot 2019-09-03 at 8.06.21 PM.pngWrong sticky header on homepage - should be white background with dark logo/links
  2. When the user scrolls down on the collection, product and other pages, I want to show the styling from the normal header white background, dark logo and dark nav links). Right now the logo and link colors are correct, but the sticky header background is transparent.
    Screen Shot 2019-09-03 at 8.03.54 PM.pngCorrect styling for active sticky header
    Screen Shot 2019-09-03 at 8.05.14 PM.pngSticky header wrong transparent background

Any help you can provide would be super helpful. Thanks!

0 Likes

Please share your site url.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
11 0 0

https://statemint-wallets.myshopify.com/

 

I've emailed you the site password separately.

0 Likes
Hello bmask3,
I have not received any password please provide.
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
11 0 0

I just forwarded the password again to pallavi@oscprofessionals.com

0 Likes

Ok
I am checking

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes

Hello Brandon,
Please add this code at the bottom of theme->edit code-> assets -> theme.js

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 450) {        $(".hero__header").addClass("darkHeader");
    } else {        $(".hero__header").removeClass("darkHeader");
    }
});

 

Now add this code the bottom on theme->edit code-> assets -> theme.scss.liquid

.header-wrapper.hero__header.darkHeader {    background: #fff;
}

Now on scroll your header change its background color black if you want to change its color just add hexa color code in place of this #fff.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
11 0 0

Pallavi, thanks so much for the help. I've implemented your code, but still am seeing issues.

 

  1. In regards to #1 from my original post, the background of the header now turns white when you scroll down on the homepage. The issue now is that the logo and links are still white so you can't see them.
  2. In regards to #2, this solution doesn't look to have changed anything. When I scroll down on the non-homepages, the header background is still transparent?
0 Likes

Hello Brendon,

Replace this code in to theme->edit code-> assets -> theme.scss.liquid

.header-wrapper.hero__header.darkHeader {    background: #fff;
}

with this code

.header-wrapper.hero__header.darkHeader {
	background: #071e3d;
}
.header-container .header-wrapper {
background: #fff;
}

Your header now works perfectly.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
11 0 0

I think you have misunderstood me. 

 

With the latest change you provided, the header background logo and links are all white.

Screen Shot 2019-09-07 at 1.49.03 PM.png

and when the user scrolls to make the header sticky, the background turns navy. 

 

Instead the header background should initially be transparent (with white logo and links) and then turn to a white bg with a navy logo and links once the hader becomes sticky. It should look like below when you scroll down.

 

Screen Shot 2019-09-07 at 1.50.55 PM.png

0 Likes