Sticky Announcement bar - Prestige

Tourist
6 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
Shopify Partner
1657 278 347

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
0 Likes
Tourist
6 0 0

doke.shop

0 Likes
Shopify Partner
1657 278 347

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
1 Like
Tourist
6 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
Shopify Partner
1657 278 347

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
1 Like
Tourist
6 0 0

Understand, thanks a lot @Jasoliya again :)

0 Likes
Tourist
6 0 0

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

0 Likes
Astronaut
835 95 178

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 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 Partner
1657 278 347

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
0 Likes