Hi,
I want Sticky Announcement Bar along with the Header. Currently the header is sticky but not the announcement bar.
I tried adding css:
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
top: 39px;
}
But Result is this:
Also when click on “Subscribe and Save” a popup bar comes:
It overlaps as I have add css part mention above.
Check my store URL: https://fishermanshub.com/
Hi @Pradnya
This is Victor from PageFly - Landing Page Builder App.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.css
div#shopify-section-announcement-bar {
position: sticky;
top: 0;
z-index: 100;
}
div#announcement-bar-newsletter{
z-index: 15;
background: white;
}
div#shopify-section-header {
top: 30px !important;
}
Hope this answer helps.
Best regards,
Victor | PageFly
Thank you for helping.
I want to add Horizontal scrolling text animation for text in announcement bar. How can I do it?
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
nodeMarquee({
parent: '.announcement-bar__content',
speed: 1
});
I added the code no change happens.
Sorry my above code is wrong please try my code again
It is working but second time is moves text alignment changes. see this:
Also I have space before repeating the statement.
Like this: https://prnt.sc/Bf8fKomgVdmI
I see, I think you need to contact the theme so they can help you align the CSS to make it more even, as I can’t edit it directly so it will be difficult to edit. Thank you so much for your patience and understanding.