Sticky Announcement bar - Prestige

Highlighted
Tourist
9 0 0

Hey everybody, 

 

can you please help me how to add sticky function for Announcement bar - theme Prestige.

 

In css i have right know (after my editing)

---------

.AnnouncementBar__Wrapper {
padding: 12px 15px;
position: -webkit-sticky;
position: sticky !important;
top: 0px;
position: fixed;
z-index:1000;
left:0;
right:0;
}

------

Its not working.

announcement_bar.png

 

 

0 Likes
Highlighted
Shopify Expert
3470 543 819

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
9 0 0

doke.shop

0 Likes
Highlighted
Shopify Expert
3470 543 819

Hi @jiri_woox 

Follow this:

Add this css in Asset->theme.scss file at bottom

#shopify-section-announcement{ position: fixed; top: 0; width: 100%; z-index: 1111; }
#shopify-section-header{padding-top: 43px; }

Note: remove your css because its affecting on page.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
9 0 0

Great @Jasoliya  , thanks a lot!

Why i cant use sticky and need to use fixed position and padding-top, if i can ask you?

 

 

Thank you and have great day

 

0 Likes
Highlighted
Shopify Expert
3470 543 819

Hi @jiri_woox 

Good question, that because of we need to keep this bar fix on top at any condition so we nee to use fix, sticky use if you want to stick any part on scrolling. 

and top:0 keep bat at top position let me know if you want to know anything else.  

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
9 0 0

Understand, thanks a lot @Jasoliya again :)

0 Likes
Highlighted
Tourist
9 0 0

Uh, next thing is mobile view, with fix position is a problem with that :/

0 Likes
Highlighted
Shopify Partner
1280 169 402

Get rid of the padding-top:43px in your css and instead set it with javascript to get the height of the announcement bar. That way if it breaks to two lines or more you wont have to manually adjust that. First comment out the padding-top: 43px on your shopify-section-header in your theme.scss, then go into index.liquid in your templates folder and add this in script tags at the bottom of the page (or you can go into your shop.js and add this without script tags):

 

<script>
$(function(){ let navBar = $('#section-header'); let announcementHeight = $('#shopify-section-announcement').height(); navBar.css('padding-top', announcementHeight + "px");
}); </script>
If my solution helped you, please like and accept as solution!
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
Highlighted
Shopify Expert
3470 543 819

Yes that better then my mobile css, you can use @Ninthony  Js code

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes