DEBUT sticky anouncement bar overlapping menu

Solved
Bas79
Excursionist
19 0 7

Hi all,

 

Could someone please assist me regarding the following issue?

I made the anouncement bar 'sticky' by adding the following piece of code on the bottom of theme.css:

sticky anouncement bar.jpg

This indeed fixed the anouncement bar to the top of the page. However, it is covering a part of the menu/header, please see below screenshot:

header kkpt.jpg

 

I have searched the entire forum for a solution, but could not find a topic for this particular issue. Does anybody have a solution for this? Thanks in advance!

 

UmairA
Shopify Partner
872 85 173

Hi there @Bas79,

Can you please include the URL of your store? I'll take a look for you before I can offer any solution/guidance. Thanks

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
khilan
Trailblazer
177 11 22

hi @Bas79 

please share your url link and password .

i can solve your problem.

thank you.

khilan

Shopify Expert | Skype: khilan.mendapara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on khilan.mendapara1995@gmail.com regarding any help
0 Likes
Bas79
Excursionist
19 0 7

Hi @khilan and @UmairA ,

 

Sorry for my late answer (i'm on CET)

thanks for trying to help me.

My store url is www.partytimewebshop.com

 

No password...

0 Likes
UmairA
Shopify Partner
872 85 173

Hi there @Bas79,

Add the following code to the bottom of theme.css file

.site-header {
    margin-top: 50px !important;
}

 

Don't forget to let me know if it works for you. 

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
Bas79
Excursionist
19 0 7

Hi @UmairA 

 

Thanks for your help, unfortunately this is not working. Still the same problem. Any other suggestions?

 

Edit: someone pointed out to me that my original code for the sticky header wasn't correct. So i think your solution would have worked also. Thanks again for your help!

0 Likes
suyash1
Shopify Partner
2726 289 452

@Bas79 - can you please make header sticky again?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Bas79
Excursionist
19 0 7

Hi @suyash1 

 

Thanks for your message, i made the anouncement bar sticky again.

0 Likes
suyash1
Shopify Partner
2726 289 452

This is an accepted solution.

@Bas79 - add this to the end of your theme.css file and check , adjust numbers as per need, first for desktop and media is for mobile, I see like screenshots

.site-header {margin-top: 50px;}

@media only screen and (max-width: 749px){
.site-header {margin-top: 100px;}
}

 

suyash1_0-1619167497768.png

suyash1_1-1619167527330.png

 

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Bas79
Excursionist
19 0 7

Hi @suyash1 

 

Thanks, but unfortunately this is still not working.

0 Likes