how do i make my announcement bar sticky?

[joshualev]

Hi there,

so basically i have created a custom announcement bar underneath my navigation bar, and i would like to make this sticky, exactly like my header is currently, it sticks when you scroll down. would someone be ab to help me with this? 

i have created this on a copy of my theme, so i have provided you with a preview of the theme version a it is currently not live.

https://u36iylroi4rtgx25-29567713340.shopifypreview.com

[oscprofessional]

@joshualev 
Hii,
first change header file css

then after this css

then after show your result

Please Add these codes

#shopify-section-header {
top: 80px !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-announcement-bar {
position: sticky;
z-index: 999;
top: 40px;
}

[joshualev]

@oscprofessional hi there i meant the custom announcement bar i made beneath the navigation bar, not the one above! could you still help me with this please?

[oscprofessional]

@joshualev ,

div#sticky-atc- {
    position: sticky;
    top: 11em;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[joshualev]

@oscprofessional thankyou this works perfectly on desktop however it is not working correctly on mobile, would you mind looking at this for me?

[oscprofessional]

@joshualev ,

It's working in mobile view.

But your store header is not sticky on mobile view.

Make you header sticky, then It will look fine.

[joshualev]

@oscprofessional 

how do i do this for mobile? do you know the code i need to implement? 

[oscprofessional]

@joshualev ,

Surely I will help you but I need to check the code in your theme files, So you have to give me the store access so that I will check and let you the solution for this work.

solution will be tested on all the mobile devices. It is a time-consuming task.

please connect with us via email or what's app.

we will discuss there further.

Have a nice day!

[joshualev]

@oscprofessional would you not be able to do this via source code? with the preview i sent?

[oscprofessional]

Hey @joshualev ,

Source code appears totally different from liquid code, So I cannot do this only with source code.

[joshualev]

@oscprofessional no problem i will ask my boss if it is okay to give you read only access and get back to you? 

[oscprofessional]

@joshualev ,

You can get connected to me on skype or what's app.

[joshualev]

@oscprofessional without giving you access, would you be able to get the bar to stick to the top of the screen on mobile without the header and nav bar appearing if you understand what im trying to say?

[oscprofessional]

@joshualev 

@media screen and (min-width: 640px) {
div#sticky-atc- {
    top: 0;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Please like my all post and accept it.

[joshualev]

@oscprofessional when i add this to the bottom of the style code in dg-flash-infos.liquid it doesnt not work, plus it removes the sticky off the desktop version

[oscprofessional]

@joshualev 

@media screen and (max-width: 640px) {
div#sticky-atc- {
    top: 0;
}
}

[oscprofessional]

@joshualev 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[joshualev]

@oscprofessional it still does this on mobile, photo below

[oscprofessional · Accepted solution]

@media screen and (max-width: 640px)
div#sticky-atc- {
    top: 0 !important;
}

@joshualev 

[joshualev]

@oscprofessional thankyou for the help mate it works now! i will be in touch if i need any more assistance! have a great day!

[oscprofessional]

@joshualev ,

Your Most Welcome!

Please like my post 🙂

[joshualev]

@oscprofessional i have noticed one issue, if you refresh the page beneath the bar itself there is an svg icon the flashes and appears for about 0.5 seconds and then disapears do you know why?

[joshualev]

@oscprofessional  can you see this message after i've accepted this as the solution? 

[oscprofessional]

@joshualev ,

Please connect me on Skype.

[ReturnPrime]

Hey @joshualev    ,
Welcome to the Shopify community!
You can follow the instruction below:

#shopify-section-announcement-bar {
position: sticky;
top: 0;
z-index: 9;
}

#shopify-section-header {
top:35px;
}

If you feel like my answer is helpful, please mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman

[joshualev]

@ReturnPrime hi there i meant the custom announcement bar i made beneath the navigation bar, not the one above! could you still help me with this please?

[BrandBuilding88]

just add the class sticky 

 id="sticky-atc-{{ section.id }}"