How Do I Make The Announcement Bar Stick To The Top Of Screen only on homepage?

Store Design
1

Hi everyone,

I’m using the Craft theme, which is the same as Dawn by code structure.

I want my Announcement Bar to be stick to the top of the home page like the header.

How can I do it?

Thanks

1 Like
2

@Ben1000

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @KetanKumar

Thanks

https://wortheattt.myshopify.com/

pass: singa

1 Like
4 
#shopify-section-announcement-bar {
    z-index: 4;
    position: fixed !important;
    width: 100% !important;
}

#shopify-section-header {
    z-index: 3;
    margin-top: 30px !important;
}

@Ben1000

Add this code in the bottom of the base.css file

2 Likes
5

Hi @Zworthkey

It’s not working.

Your code made the announcement bar to be on every page and sticky.

I wanted the announcement bar to be:

  1. only on homepage

  2. act like the header, when scrolling down you don’t see the menu but when scrolling up you do see, I want the same with announcement bar

Thanks

6

@Ben1000
it’s already, you announcement bar shows in every page already.

Hide it from all pages or display only homepage

7

Hi @Zworthkey

Please read my post again, you didn’t solve the concept of my problem. Also, the announcement bar is not sync good with the header on the home page.

There is no option on Shopify 2.0 to add the announcement bar only on homepage or to hide it from specific pages.

8

@Ben1000

can you try this

https://www.shopify.in/partners/blog/shopify-announcement-bar

9

Hi @KetanKumar

Thanks but it’s not regarding the concept of my original post.

Anyone who can help me with that?

1 Like
10

@Ben1000

can you please share theme.js file first

11

Nobody here is paid to solve your problem, @Zworthkey is nice enough to point to you which line of css you can start working on. If you expect the solution to be handed to you just like that, you have come to the wrong place. Go Fiverr or Upwork, there are many developers you can pay to solve the problem for you. Be courteous and don’t be cheap.

1 Like