Sticky/Fixed Header + Navigation with a twist for Brooklyn theme

Highlighted

@Otaro,

Please add this css

body:not(.template-index) .main-content {
	padding-top: 120px !important;
}

 

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
5 0 0

Hello OSC,

 

Thanks this helped. 

 

Unfortunately now I am facing another issue. Maybe this comes from the different code pieces. On my "home screen" I have a dark slide + transparent header with white logos etc. On any other page i have a white header + dark blue logos etc.

 

- When I now scroll down on "home-site" the the logos stay white and the background becomes blue -> Fine

- But when I now scroll down on any other site, the logo stays blaue and the background becomes blue -> Not readable anymore

 

Can I basically swap the logo and menu color used on the "Home-Site" from white to blue and then the background becomes white (when scrolling down). This would fit any other page.

 

And I am wondering of both of these code pieces are needed?!

/* CHANGE HEADER TO STICKY */
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

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

/* CHANGE STICKY HEADER TO CHANGE COLOR BY SCROLLING */
$( document ).ready(function() {
$(window).scroll(function(){
    if ($(window).scrollTop() >= 700) {
        $('.header-wrapper').addClass('fixed-header');
    }
    else {
        $('.header-wrapper').removeClass('fixed-header');
    }
});
});
0 Likes
Highlighted

@Otaro,

When I now scroll down on "home-site" the the logos stay white and the background becomes blue -> Fine

- But when I now scroll down on any other site, the logo stays blaue and the background becomes blue -> Not readable anymore

 

For this Please do some changes in your css code

Please remove below css

.fixed-header .site-header {
	background-color: #a3aab7;
}

Add below css

.template-index .fixed-header .site-header {
	background-color: #a3aab7;
}

2020-03-02_JS.jpg

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
5 0 0

Hi OSC,

 

Very helpful thank you.

 

One question was unanswered, though.

 

"Can I basically swap the logo and menu color used on the "Home-Site" from white to blue (as defined when no transparent header is set) and then the background becomes white (when scrolling down). This would fit any other page."

 

This would lead to a uniform header throughout each site of the shop.

 

Again, Thanks a lot!

 

Adrian

0 Likes
Highlighted
Tourist
3 0 0

hello the sticky header works fine on my brooklyn theme its just whenever i go on mobile the header will cover part of my page and on product pages it will block out a portion of my product photo is there a fix to this? 

0 Likes