Sticky Announcement bar - Prestige

Tourist
6 0 0

Thank you @Ninthony , just if i use menu for mobile, top of the menu is higher than header.

 

 

announcement_bar.png

 

Next is, if i go to collection and or any other page, top of the header is higher than announcebar. It works at homepage only.

 

announcement_bar_2.png

 

 

Looks like more complicate.

0 Likes
Highlighted
Astronaut
1091 150 274

Yeah that's the thing about sticky announcements or navigation bars. If your site has already been designed to not have one, then you have to find all the spots in the store that need to get pushed down. If you instead put it in your shop.js without the script tags it will work across all pages. Alternatively you can put it in your theme.liquid in your layouts folder in script tags at the end of the body. 

 

You can add css to your side navigation to push it down:

 

@media (max-width: 1240px){
.Drawer__Main { padding-top: 17px; }
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
3 0 0

The other way to add a sticky announcement bar in the Prestige theme is by moving the announcement inside the header.

Since Shopify won't allow section under another section. We have to create a new snippet and remove the actual announcement bar.

 

 

How? (Please contact a front-end developer to do this for you):

1. Create a new snippet(announcement-in-header.liquid) and move the announcement.liquid code inside it.

2. Replace <section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="announcement-bar"> to <section id="section-announcement">

3. Replace "shopify-section-{{section.id}}" to "section-announcement".

4. Replace anything like {{ section.id }} to announcement in this new snippet.

5. Include this new snippet at the end (below) id="Search" div.

6. Paste scheme from the announcement.liquid in header.liquid schema.

7. Comment {% section 'announcement' %} from theme.liquid file.

8. Now your announcement bar is moved to the header. Make sure to populate/configure your announcement bar again from Shopify's Editor.

 

Happy Learning Shopify :)

 

 

0 Likes