Solved

how do i make my announcement bar sticky?

joshualev
Explorer
103 0 14

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? 

joshualev_0-1652092652230.png

 

 

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

Accepted Solution (1)
oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

 

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

@joshualev 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 26 (26)

oscprofessional
Shopify Partner
15905 2378 3087

@joshualev 
Hii,
first change header file css

oscprofessional_0-1652094453194.png

then after this css

oscprofessional_1-1652094504041.png

then after show your result

oscprofessional_2-1652094545123.png

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;
}

 

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@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
Shopify Partner
15905 2378 3087

@joshualev ,

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

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

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

oscprofessional
Shopify Partner
15905 2378 3087

@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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@oscprofessional 

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

 

oscprofessional
Shopify Partner
15905 2378 3087

@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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

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

oscprofessional
Shopify Partner
15905 2378 3087

Hey @joshualev ,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

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

oscprofessional
Shopify Partner
15905 2378 3087

@joshualev ,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@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
Shopify Partner
15905 2378 3087

@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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@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
Shopify Partner
15905 2378 3087

@joshualev 

@media screen and (max-width: 640px) {
div#sticky-atc- {
    top: 0;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
oscprofessional
Shopify Partner
15905 2378 3087

@joshualev 

 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@oscprofessional it still does this on mobile, photo below

 

joshualev_0-1652175913296.png

 

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

 

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

@joshualev 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@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
Shopify Partner
15905 2378 3087

@joshualev ,

Your Most Welcome!

Please like my post 🙂

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
joshualev
Explorer
103 0 14

@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_0-1652177661196.png

 

joshualev
Explorer
103 0 14

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

oscprofessional
Shopify Partner
15905 2378 3087

@joshualev ,

Please connect me on Skype.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

ReturnPrime
Shopify Partner
438 63 102

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
Explorer
103 0 14

@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
Excursionist
29 2 6

just add the class sticky 

 

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