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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
15 0 2

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
15 0 2

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
Highlighted
Excursionist
24 0 3

 

Can anyone help me to make my main navigation header sticky in brooklyn theme 

Thanks alot

0 Likes