Sticky header (transparent on home page, white background with black on other)

Highlighted
New Member
2 0 0

Hi,

 

I am using the Brooklyn theme and want to make my header sticky. I found multiple solutions for making the header sticky but I have a very specific requirement.

I want the header to be transparent with white text (when Home page loads) but when I start scrolling, I need the header background as White and text on it as Black.

On other pages, I need the header background as White and text on it as Black.

 

Here's the link to our current store: https://atharvabhapkarstore.myshopify.com/?_ab=0&_fd=0&_sc=1&key=83fa3ff282f3f6e23c4967b18b749de439a...

 

Can someone please help me?

 

Thanks in advance.

0 Likes
Highlighted
Shopify Partner
76 8 19

Hi @Atharva 

 

There are many ways to skin a cat and the proper one depends on the result you want to get.

Why do you need a sticky header for your website?

 

 

I help family-run brands increase D2C sales online.


Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com

Did my answer save you time? Buy me a coffee, please ☕ paypal.me/braiv

Want to increase revenue? $ Find where you are leaving money on the table with your Shopify store by reading "Your Next Brass Ring"
0 Likes
Highlighted
New Member
2 0 0

Hi @rsdimitrov ,

 

The reason we need a sticky header is that the header should follow the user wherever he/she scrolls. This will make their navigation easier. Also, the reason for having a transparent header at homepage is because we want slideshow at homepage to show as full while later, it makes it easier to read the text on their scroll.

 

Hence, the requirement - hope it makes sense.

 

Thanks.

0 Likes
Highlighted
Shopify Partner
76 8 19

Hi @Atharva 

Thanks for the explanation!

 

Well, your next step is to get one of the solutions you've found for sticky header and apply it to the site.

Then I can look into the new code and tell you what needs to change where, so that the header matches your needs.

I help family-run brands increase D2C sales online.


Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com

Did my answer save you time? Buy me a coffee, please ☕ paypal.me/braiv

Want to increase revenue? $ Find where you are leaving money on the table with your Shopify store by reading "Your Next Brass Ring"
0 Likes
Highlighted
Tourist
5 0 0

Hey @rsdimitrov 

That is exactly what I was looking for, may you assist me as well?

0 Likes
Highlighted
Shopify Partner
76 8 19

Hey @ZenVibezStore 

I'd be happy to help you.
What is the address of your store?

Is it by any chance https://zenvibes.shop/?

I help family-run brands increase D2C sales online.


Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com

Did my answer save you time? Buy me a coffee, please ☕ paypal.me/braiv

Want to increase revenue? $ Find where you are leaving money on the table with your Shopify store by reading "Your Next Brass Ring"
1 Like
Highlighted
Tourist
5 0 0

@rsdimitrov its zenvibezstore.com
I have found another users website which has exactly what I want to do with mine, just his header after scrolling pops instantly to white, is it possible to make with little fading effect ? 

Also it has a nice underline under heading which is following along, looks perfectly fine. 

Password: 123zen

 

0 Likes
Highlighted
Tourist
5 0 0

https://swagthedogshop.com/

thats the website

0 Likes
Highlighted
Shopify Partner
76 8 19

@ZenVibezStore 

I saw your site, it is looking good. :)

So, here is what I'd suggest regarding your sticky header issue:

0. Make a copy (for backup) of your published theme (Actions > Duplicate on the Themes screen in Shopify Admin)

1. Follow these instructions to get to the theme.scss.liquid file on your store, but don't use their code:

https://community.shopify.com/c/Shopify-Design/BROOKLYN-THEME-Sticky-header-with-Logo/m-p/449685/hig...

2. Then paste this code instead, at the end of the file:

 

.header-wrapper, .header-container {
  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 {
}
.shopify-payment-button {
  z-index: 0; 
}

3. Save the file, open your website and refresh

4. Then come back here if anything isn't looking as you'd expect or want it to and I'll help you do the little tweaks.

 

 

 

I help family-run brands increase D2C sales online.


Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com

Did my answer save you time? Buy me a coffee, please ☕ paypal.me/braiv

Want to increase revenue? $ Find where you are leaving money on the table with your Shopify store by reading "Your Next Brass Ring"
1 Like
Highlighted
Tourist
5 0 0

@rsdimitrov thank you with such a fast reply. 
Okay so I've added code and it looks like its almost about to work but there are some things:
1. On home page header stays sticky, but its still transparent after scrolling. would love to make it appear white background just when I start scrolling, but with fading effect.
2. On every other page header looks fine and sticky as I wanted, just looks like it covers some text at top of the page. Like a layer on top not next to each other.
3. And small underline under header is missing.
With these 3 fixes everything would be perfectly fine :)

 

0 Likes