Can the Brooklyn theme announcement bar be made sticky?

Store Design
1

Hey,

I’m using Brooklyn theme, can I make the announcement bar sticky at the top of all the pages?

I don’t want to use an app for that, so I thought to ask u guys if that’s a possibility?

2

Hello, @Raflahon

Welcome to the Shopi fy Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

3

Yeah, sure..

here: https://usefulweirdo.com/

1 Like
4

@Raflahon

You can add the following code at the bottom of your assets/theme.scss.liquid file.

.header-wrapper, .header-container {
    position: fixed;
    top: 0px;
}

Hope this works. Thanks!

1 Like
5

the bar is fixed, but the header menu and the logo is also fixed with it,

is there a way to make only the bar sticks at the top?

@dmwwebartisan

6

Any suggestions?

7

@Raflahon

Please try this code

.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;
  }
}
8

@dmwwebartisan

I’m really sorry, but the header menu and the logo are still pinned at the top with the bar…

9

Hi,

You can try the following CSS

.header-wrapper {
  padding-top: 45px;
}

.announcement-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000000;
}
1 Like
10

@LamQSolutions

that worked! thank u very much, but it’s only on the home page, can u tell me how do I add it also to the product page?

11

Hi @Raflahon ,

Have you enabled the announcement bar on the product page and other pages? Currently announcement bar is shown in the home page only. So you can not see it in other pages.

1 Like
12

@LamQSolutions

Oh my bad! it’s completely working now on all pages,

thank u very much for your help my dear, you’re awesome.

13

Hi @Raflahon

It’s my pleasure to help you :slightly_smiling_face:

1 Like
14

Hi,

Here is a great tutorial on Youtube on how to add a nice looking top sticky announcement bar on your Shopify store.

I hope this may help

Marouane

15

hi. i have 2 announcement bars - one after the other, both on top of header. with this code, it only sticks one of them on top. how can i make it so both announcements are on top and sticks. also the header and logo is cut because of the announcement bar sticking on top. any work around this so the logo and header is not cut? thanks and immediate response and help would be appreciated.