Horizon Theme - My scrolling Announcement Bar is overlapping with the theme's default transparent header

[majgza]

Hello,

I am having trouble making the announcement bar to be on top of the transparent header at my shop:

I think I need to adjust the z-index but I just cannot figure it out. Can someone explain how to make this happen?

I am using Horizone Theme and my goal here is to have the purple announcement bar on top of the transparent header.

Thanks in advance!

[Maximus3]

Far better themes out there that you don’t have to edit code for every little thing…

[majgza]

Do you have a suggestion?

[Dan-From-Ryviu]

You can try to add this code to Custom CSS of theme settings

.header-section { top: 60px !important; }

[devcoders]

Hi @majgza

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[donny_fitmiecom]

Hi @majgza
Could you share which theme your store is using, along with the store URL and password?We’ll take a look and assist you further.

[Maximus3]

Any paid theme is going to be better than a free one. Yes it’s an investment. But one that is definitely worth it. You could literally spend hundreds of hours trying to get a free theme like dawn or horizon the way you want. Or get something that already has the features and settings built in. Its been done, and there are successful websites built on dawn, but it’s not worth it imo. Plus, in the Shopify Store you can try before you buy. Check out some premium themes. You may like some, and not like others. As for me, I prefer Themeforest themes. They have way more bells and whistles for a lot cheaper, and the developers are available through chat and give one on one help for up to 6 months I think.

[Parampreet]

Hi @majgza ,
Could you please share your store url so I can check the issue.

[DitalTek]

hi @majgza

Can you pls leave the url here? I will help you to check and fix it.

[Small_Task_Help]

@majgza

I think I need to adjust the z-index but I just cannot figure it out. Can someone explain how to make this happen?

I am using Horizone Theme and my goal here is to have the purple announcement bar on top of the transparent header.

Thanks in advance!

Hi,

Hope this will help

• Put announcement-bar before header in theme.liquid.
• Give bar a higher z-index (e.g., 9999) and the header a lower one (e.g., 1000), both with position: relative (or sticky/fixed if your design needs it).
• If the bar is fixed, add top space (CSS padding or the small JS that measures the bar).

[websensepro]

Hello, @majgza

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thank You!

[majgza]

Thanks! I will check it out.

For me, Horizon has been great so far at the point that this is my first post about something I want to do.

Thanks again!

[tim_tairli]

Ideally, share an URL to your store, preview URL or storefront password if not yet published.

Can also try “Custom CSS” on the Announcement bar section like this. If does not work immediately, try higher z-index values…

{
  z-index: 4;
}