scroll navbar position for brooklyn theme

Solved
Highlighted
Excursionist
21 0 2

yes.. but thats not the theme i used. i am currently using brooklyn theme. 

 

https://egxloxb89suzkxa8-25472335924.shopifypreview.com

0 Likes
Highlighted

But on Product page that theme is showing? please provide your product page 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

ohh i get your point. okay, i believe that my homepage is brooklyn theme but on my other page it shows a different theme (i don't know what happened). i cannot provide a link because i have a live website, so i'll just give u the steps.

 

collection > all items

collection > women's clothing

collection > men's clothing

 

thank you againnnn. sorry for some errors

0 Likes
Highlighted
New Member
1 0 0

@oscprofessional wrote:

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.

 


 

Hi OSC Professional, I am using Brooklyn theme and added the following but it didnt work. Please help! Bascially im looking for the same thing: (A) transparent header at the very top, then (B) header changes background color as user scrolls. Thanks so much in advance!

 

(1) Theme.js.liquid

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

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

(2) theme.scss.liquid

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

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

 

also to note, i did add to theme.scss.liquid the following code to make the header sticky:

 

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

0 Likes
Highlighted
Tourist
5 0 0

Hi @oscprofessional 

Its not working.I did as you directed but in vain.I am having slideshow on my home page, as i scroll down the background color doesn't changes.

Help me to fix this too !!

0 Likes
Highlighted

Hello @theTeam,

Please add below code in theme.js file

 

$(document).ready(function() {
   $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $(".header-container").addClass("sticky-header");
    } else {
      $(".header-container").removeClass("sticky-header");
    }
  });
});

 

 

Add below code in theme.scss

 

.template-index .sticky-header .header-wrapper {
    background: #FFF4F6;
}

 

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
Tourist
5 0 0

Thank you @oscprofessional  

That worked !

0 Likes