scroll navbar position for brooklyn theme

Solved
Highlighted
Excursionist
21 0 2

any idea how to make my navbar fixed and change color when i scroll down? 

a quick example for that would be like this.

 

https://themeforest.unitedthemes.com/wpversions/brooklyn/demo1/

 

thank you! :)

0 Likes
Highlighted

Hello ,

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
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
0 Likes
Highlighted
Excursionist
21 0 2
Highlighted

This is an accepted solution.

Hello,
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: #000;
}

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 #000.

 

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
21 0 2

thank you so much for the help!!! i really appreciate it! :)

1 Like
Highlighted

Most welcome :)
Feel free to ask solution on DM as well.

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
3 Likes
Highlighted
Excursionist
21 0 2

i have another question. 

 

how do i customize the navbar to other pages like putting a color to it but it won't affect my homepage. thank you so much for the helppp

0 Likes
Highlighted

Which pages navbar would you like to customize?
Please provide page link.

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
21 0 2

hii, i would like to change all the pages except for the homepage. my homepage is already fixed with your help (thank you!) but my next problem is the product page or rather all other navbar pages were just fixed and the text are just overflowing so i would like to add a background color to it. but whenever i add color to it, my homepage would also add color. 

 

here is my URL:

https://ls2xnats0qcqn0pg-25472335924.shopifypreview.com

 

i really appreciate your replies.

0 Likes
Highlighted

So you just want to change background color of Header in Product page.
I attached one image please confirm the section.
header.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
0 Likes