How can I make my image banner sticky on the landing page?

[arjaedesigns]

 

Hi! I have an image banner directly under my header on my landing page that I would like to be sticky along with my header. The image header I am referring to is the purple bar that says “Oder your dress, send your fabric..etc” URL is http://arjaedesigns.com thank you!

[Dan-From-Ryviu]

Hi @arjaedesigns 

Please add this code to your theme.liquid file before </head> tag in Online store > Themes > Edit code 

<style>
@media (max-width: 767px) {
#shopify-section-template--16051720421527__2899f3cd-f9cd-4163-879e-a4c428ea6d6c {
position: sticky !important;
top: 64px;
z-index: 9;
}
}
</style>

[arjaedesigns]

Thank you @Dan-From-Ryviu , unfortunately this didn't work. I do already have my header set as sticky, which works, but I want the image banner to be sticky too.

[Dan-From-Ryviu · Accepted solution]

Hi, that code I sent you will make that image sticky in mobile only. If you want to make it sticky both for deskop then please edit code like this 

<style>
#shopify-section-template--16051720421527__2899f3cd-f9cd-4163-879e-a4c428ea6d6c {
position: sticky !important;
top: 84px;
z-index: 9;
}
@media (max-width: 767px) {
#shopify-section-template--16051720421527__2899f3cd-f9cd-4163-879e-a4c428ea6d6c {
top: 64px !important;
}
}
</style>

[arjaedesigns]

That worked - thank you so much!