How can I add a sticky header to my Brooklyn theme?

Store Design
1

Hi, I’d like to add a sticky header to my brooklyn theme. Is there any way to do this? My URL is https://shoplineagejewelry.com/ and my password is ‘beckew’. Thank you!

2

Hi @adthai

Please add this code to your theme.scss.liquid or timber.scss.liquid file.

Navigate to online store >> Click edit theme code.

Now find theme.scss.liquid or timber.scss.liquid and paste the following code:

@media (min-width: 1000px){
.drawer__header-container .announcement-bar{  position: fixed !important;
  top: 0;
  width: 100% !important;
}

.drawer__header-container .site-header{  position: fixed !important;
  background: #fff !important;
  top: 37px;
}

}

I hope it will be helpful for you.

Thanks

3

Thank you! Is there any way to do this for mobile as well?

4

Also, I noticed the padding of the header now blocks my collection titles and page titles. Is there any way to fix that?

adthai_0-1642562996412.png
adthai_0-1642562996412.png1512×415 23.3 KB

5

@adthai Replace the previous code with this code:

@media (min-width:1000px){
.drawer__header-container .announcement-bar{  position: fixed !important;
  top: 0;
  width: 100% !important;}

.drawer__header-container .site-header{  position: fixed !important;
  background: #fff !important;
  top: 37px;}
.main-content{padding-top: 10% !important;}

}
1 Like
6

Thank you! Is there a way to do this on mobile as well? I appreciate your help!

7

@adthai For mobile and desktop paste the following code. Remove the previous one.

.drawer__header-container .announcement-bar{  position: fixed !important;
  top: 0;
  width: 100% !important;}

.drawer__header-container .site-header{  position: fixed !important;
  background: #fff !important;
  top: 37px;}
.main-content{padding-top: 10% !important;}

@media (max-width:768px){
.main-content{padding-top: 120px !important;}
}
1 Like
8

Hello, @adthai ,

I am very pleased we had, @eFoli-Marvic , to give us some coding solutions for this inquiry. I also would like to suggest a solution regarding this.

Our Help Center has a link dedicated to this particular request regarding the Brooklyn Theme. As per the article, this customization works well for stores that need to have the header content visible at all times, or have pages that require a lot of scrolling.

If you are on a paid plan and are using a Shopify made theme, you also qualify for 60 minutes of design time from our Themes team. If there is anything that you are having issues with in the theme editor, feel free to reach out to our Support Team to see if we can help out. They will take your requests to the Themes team. If we can accommodate, we will use your 60 minutes to accomplish this for you.

Using your inquiry as an example, this request will use up 15 minutes of your design time if forwarded to our Themes Team.

Feel free to visit this link for more information regarding this feature.