Brooklyn theme sticky header

Solved
Highlighted
Tourist
9 1 2

Need some help to make header sticky, I was able to do so with css. however because i have a transparent header i was not able to use padding which would leave a big blank on the top, also i am looking for a way to make the header darken as it scrolls down.

 

/*sticky header */
.header-wrapper {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
}

0 Likes
Shopify Partner
1657 359 488

Hi

Please share your web shop url & password.

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 1 2

@dmwwebartisan wrote:

Hi

Please share your web shop url & password.

Thanks!

 


Thank you for your reply

 

0 Likes
Highlighted
Shopify Partner
1657 359 488

Hi

 

i checked your web shop and i can do that but need shop accesses or theme zip email me.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 1 2

This is an accepted solution.


@readytoraw wrote:

Need some help to make header sticky, I was able to do so with css. however because i have a transparent header i was not able to use padding which would leave a big blank on the top, also i am looking for a way to make the header darken as it scrolls down.

 

/*sticky header */
.header-wrapper {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
}


I think i found quick way to solve this.

 

JS

$(window).scroll(function(){
if ($(window).scrollTop() >= 1) {
$('header').addClass('header-fixed');/*change the actual class of the header will thru it into a different css setting which is the key in this case*/
$(".site-header").css('background-color', 'rgba(220,220,220,.9)'); /*this is to change back ground of the header i added some smoky effect*/
}
else {
$('header').removeClass('header-fixed');
$(".site-header").css('background-color', 'transparent')
}
});

 

CSS

.header-fixed {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
}

0 Likes
Highlighted
New Member
3 0 0

hi @readytoraw  @dmwwebartisan, I used your solution on my shop, it's working great but I have one major problem. 

when the first element after the header is h1 the header "swallows" the h1 and disenabling the navigation menu.

do you have any idea how to solve it?

you can see it on "our products" and "contact us" pages,

my store URL:

www.canisnatures.com

my store password:

"steung"

 

thanks in advance

0 Likes
Highlighted
Shopify Partner
1657 359 488

Hi @Roeiklein 

Please screenshot for me . what do you want

 

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
1 0 0

Hi @readytoraw , I tried the code you given, it absolutely works fine for my homepage! Thank you so much!

By the way, there are two issues.

#1 : When I scroll down the page, the page title will appear on navigation bar. The rest of the pages also have same issue with this, except homepage

Capture111.PNG

 

 

 

 

#2 : When I scroll down the page, I couldn't click the menu item. The rest of the pages also have same issue with this, except homepage is fine!

Capture111.PNG

 

 

 

 

 

Hope it could be solved, thank you!

0 Likes
Highlighted
New Member
2 0 0

HI! Do you have an answer of your concern? because we have the same problem. please let me know.. i still cant find the answer. thanks

0 Likes
Highlighted
New Member
2 0 0

Can you email me just in case you solve already tha problem? embenliro@yahoo.com thank you

0 Likes