Header Hides Behind Announcement Bar

Store Design
, , , , , , , ,
1

Hello, folks!

My header, while scrolling down, it gets behind (in layers) the announcement bar and it hides behind it.

Image:

IMG_2060.jpg
IMG_2060.jpg1170×275 12.5 KB

The icons and the header itself disappear completely behind the announcement bar while scrolling.

It also happens with more elements. How can I put the announcement bar’s layer behind every other element’s layer?

Is there any way to fix this?

My theme is Stiletto and my website is: https://4svxm0n5yawy71pb-60150284501.shopifypreview.com

Thanks in advance folks!

2

The issue occurs because the announcement bar has a higher z-index than your header, causing it to overlap when scrolling. To fix this, you can adjust the z-index values in your CSS so that the header appears above the announcement bar.

Here’s how you can fix it:

  1. Open your theme’s CSS or custom CSS file.
  2. Add the following CSS code:
.announcement-bar__item {
    z-index: 0 !important;
}

This ensures that the header remains above the announcement bar while scrolling. If other elements also need layering adjustments, inspect their z-index and assign values accordingly, keeping the header’s value higher.

If you just want to make sure the announcement bar stays at the top of the page so you don’t have to worry about overlap, you can adjust the margin in the same code. Like this:

.header{
   margin-top: 10px;
}

Simpler Solution with EasyEdits

I’m the developer of EasyEdits, a Shopify app that allows you to visually fix issues like these without diving into CSS. You can use the free trial to make changes and keep them permanently, even if you don’t continue with the app.

Hope it works out—let me know how it goes!

3

Hello, thanks for the reply but sadly the code didn’t change anything. The announcement bar still overlaps every other element.