Announcement bar

Solved
Raflahon
Excursionist
17 0 8

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?

0 Likes
HardikDavra
Shopify Partner
2322 365 995

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.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Raflahon
Excursionist
17 0 8
dmwwebartisan
Shopify Partner
7310 1727 2303

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Raflahon
Excursionist
17 0 8

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 

0 Likes
Raflahon
Excursionist
17 0 8

Any suggestions?

0 Likes
dmwwebartisan
Shopify Partner
7310 1727 2303

@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;
  }
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Raflahon
Excursionist
17 0 8

@dmwwebartisan 

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

0 Likes
LamQSolutions
Pathfinder
109 24 34

This is an accepted solution.

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;
}
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
Raflahon
Excursionist
17 0 8

@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?

0 Likes