CODEWITHSUNDEEP
csssticky
AJ-AJ
AJ-AJ

Reputation: 21

Apply sticky position

I am working on a Shopify store I have taken over in the middle of the project. I have added a custom announcement bar. However, I cannot get it to stick to the top when scrolling after trying the CSS position options. Every time I try the nav bar, it either scrolls over it or simply pushes the announcement bar out of view and leave the nav bar sticky.

Here is a live preview link. The custom announcement bar is in orange: https://crazy-bull-america.myshopify.com/?_ab=0&_fd=0&_sc=1

Upvotes: 2

Views: 784

Answers (1)

Filo Essam
Filo Essam

Reputation: 468

It's easy. You have to give the height of the announcement bar and make the navbar sticky at that height.

As your website, the announcement bar has a height of 41 pixels... You can also add a fixed height! So make the announcement bar sticky at 0 and the navbar sticky at 41 pixels.

This is the CSS for the announcement bar:

.section-announcement-bar {
   position: sticky;
   top: 0;
   z-index: 20;
}

This for the navbar

.sticky-header .section-header {
    position: sticky;
    top: 41px;
    width: 100%;
    z-index: 20;
}

Upvotes: 2

Related Questions