Announcement bar displayed on top of header

Solved

Announcement bar displayed on top of header

weartaiyo
New Member
4 0 0

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.

Capture.PNG

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!

Accepted Solution (1)
round
Shopify Partner
113 18 10

This is an 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

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

View solution in original post

Replies 7 (7)

round
Shopify Partner
113 18 10


@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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
round
Shopify Partner
113 18 10

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

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
weartaiyo
New Member
4 0 0

I tried that and it's still not working

round
Shopify Partner
113 18 10

This is an 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

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
weartaiyo
New Member
4 0 0

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.

round
Shopify Partner
113 18 10

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

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
weartaiyo
New Member
4 0 0

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