Announcement bar covering header!!!

Shopify Discussion

Topic summary

A Shopify store owner is experiencing a layout issue where the announcement bar overlaps and covers half of the header on their purchased theme. The user attempted to fix it by adding CSS code above the </body> tag but saw no results.

Proposed Solutions:

Multiple community members offered different approaches:

  • Reorder theme sections: Remove custom sticky header code, then drag the Header block below the Announcement bar in the theme customizer and set sticky header to “Always”

  • CSS fixes: Several users provided custom CSS snippets to be added either:

    • Above the </body> tag in theme.liquid
    • At the end of the style.css file
    • Before </head> in theme.liquid

The CSS solutions primarily adjust the positioning of the navigation/header element (using top property with values like 3rem, 44px, or 70px) to prevent overlap with the announcement bar.

Status: The issue remains unresolved as the original poster has not confirmed which solution worked. Screenshots were provided by helpers showing expected results.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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
2

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

Screenshot 2025-04-25 at 08.41.55.png
Screenshot 2025-04-25 at 08.41.55.png3644×1154 422 KB

3

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:

Moeed_0-1745547012905.png
Moeed_0-1745547012905.png1900×911 254 KB

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

Best Regards,
Moeed

4

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:

BiDealDiscount_0-1745565137118.png
BiDealDiscount_0-1745565137118.png1363×944 209 KB

5

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

2 .png
2 .png997×136 78.2 KB

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

6

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!

7

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.