Announcement bar displayed on top of header

[weartaiyo]

https://weartaiyo.com/

I am currently working on a project where I have created a custom transparent animated header for my website. However, I am facing an issue where the announcement bar is displayed on top of the header, disrupting the intended design and animation effects.

Here are the specific details of my setup:

The header is designed to be transparent and includes animations.

The announcement bar is positioned above the header, which overlaps and obscures the header's content.

Any advice on how to resolve this overlay problem or best practices for handling similar scenarios would be greatly appreciated. If you need any additional information or code snippets, please let me know.

Thank you in advance for your help!

[comercioservice]

@KateD199

Please go to

1) Online store

2) Themes -> Edit theme

3) Layout

4) base.css and paste this code on the end

.home-page .header {
    top: 40px;
}
.home-page .scrolled-past-header .header {
    top: 0;
}

I hope it works for you, let me know @weartaiyo , if not, I have another  solution just DM me

[comercioservice]

@weartaiyo , here is the working video https://www.loom.com/share/d7d7526ef8b14278a80c3783727e5507?from_recorder=1&focus_title=1
Thank you

[weartaiyo]

I tried that and it's still not working

[comercioservice · Accepted solution]

@weartaiyo , how did you applied, can I see the way of the code, or can share a google meet call I can help you thanks y

[weartaiyo]

I pasted the code you gave me at the bottom of the base.css file.  Below is how I implemented the transparent header

/* General header styles */
.header {
width: 100%;
z-index: 1000;
transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Home page header styles */
.home-page .header {
position: fixed;
top: 0;
left: 0;
background-color: transparent;
}

.home-page .header.scrolled,
.home-page .header.hover,
.home-page .header:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.home-page .header .disclosure .disclosure__button span,
.home-page .header .disclosure .disclosure__button svg,
.home-page .header__inline-menu .list-menu li span,
.home-page .header__inline-menu .list-menu li svg,
.home-page .header__icon,
.home-page .header .localization-selector.link {
color: #FFFFFF;
}

.home-page .scrolled-past-header .header .disclosure .disclosure__button span,
.home-page .scrolled-past-header .header .disclosure .disclosure__button svg,
.home-page .scrolled-past-header .header__inline-menu .list-menu li span,
.home-page .scrolled-past-header .header__inline-menu .list-menu li svg,
.home-page .scrolled-past-header .header__icon,
.home-page .scrolled-past-header .header .localization-selector.link,
.home-page .header.hover .disclosure .disclosure__button span,
.home-page .header.hover .disclosure__button svg,
.home-page .header.hover .header__inline-menu .list-menu li span,
.home-page .header.hover .header__inline-menu .list-menu li svg,
.home-page .header.hover .header__icon,
.home-page .header.hover .localization-selector.link,
.home-page .header:hover .disclosure__button span,
.home-page .header:hover .disclosure__button svg,
.home-page .header:hover .header__inline-menu .list-menu li span,
.home-page .header:hover .header__inline-menu .list-menu li svg,
.home-page .header:hover .header__icon,
.home-page .header:hover .localization-selector.link {
color: rgb(var(--color-foreground)) !important;
}

.home-page .scrolled-past-header .header {
background: var(--gradient-background) !important;
position: absolute;
max-width: 100%;
}

.home-page .header.hover,
.home-page .header:hover {
opacity: 0.9;
background: var(--gradient-background) !important;
}

/* Inner page header styles */
.inner-page .header {
position: relative;
background-color: rgba(0, 0, 0, 0.8); /* Change the background color */
max-width: 100%;
color: rgb(var(--color-foreground)) !important; /* Change the text color */
}

/* Additional color settings for inner-page header */
.inner-page .header .disclosure .disclosure__button span,
.inner-page .header .disclosure__button svg,
.inner-page .header__inline-menu .list-menu li span,
.inner-page .header__inline-menu .list-menu li svg,
.inner-page .header__icon,
.inner-page .header .localization-selector.link {
color: rgb(var(--color-foreground)) !important; /* Change icon and button colors */
}

/* Mobile-specific styles to make the header white with no custom animations */
@media (max-width: 767px) {
.header {
position: relative !important;
background-color: #FFFFFF !important; /* Change the background color to white */
max-width: 100% !important;
color: #000000 !important; /* Change the text color to black */
transition: none !important; /* Remove custom animations */
}

.header .disclosure .disclosure__button span,
.header .disclosure__button svg,
.header__inline-menu .list-menu li span,
.header__inline-menu .list-menu li svg,
.header__icon,
.header .localization-selector.link {
color: #000000 !important; /* Change icon and button colors to black */
}
}

/* Max width */
:root {
--page-width: 100% !important;
}

.header__logo--default {
display: none;
}

.header.scrolled-past-header .header__logo--transparent {
display: none;
}

.header.scrolled-past-header .header__logo--default {
display: block;
}

file name component-header.css

Also I made this JS file 

document.addEventListener('DOMContentLoaded', function () {
const header = document.querySelector('.header');

window.addEventListener('scroll', function () {
if (window.scrollY > 0) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
});

header-behavior.js

maybe it will help you figure out what's wrong.

[comercioservice]

@weartaiyo ,
sorry not able to understand properly the code 😞

[weartaiyo]

The code was good. Make sure you are using a custom file to put it in there.