Announcement bar covering header!!!

Hi please help! The theme I bought via an IG page, the announcement bar looks terrible! It covers half the header. How do I fix this?

https://aynoorstudios.com/

^current

@media (max-width:767px) { .header { padding-top: 70px!important; }

^ I pasted this above tag and it did nothing. (idk if I am even doing that right, I just paste it and hit save. Not sure if there is further steps…)

Explain like I am five! Thank you!

2 Likes

Hi @aynoorstudios ,

Please remove the code you added to make your header sticky, then go to your store admin > Sales channels > Online store > Themes > Customize > Header, drag and drop the Header block below the Announcement bar, and change the Sticky header of the Header to Always

Hey @aynoorstudios

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Hi @aynoorstudios

Your custom code CSS will not working, Let try to add this code above your body tag and let me know the result:


Hello @aynoorstudios
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> style.css
add this code at the end of the file and save.

.nav-sec.home-nav-d {
top: 3rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

Hi @aynoorstudios

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Hello @aynoorstudios

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search style.css

  • Insert the provided CSS code at the end of the file and save the changes.

nav.nav-sec
{
    top: 44px;
}
nav.nav-sec.active
{
    top: 0;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.