Change header background colour to white on hover and invert logo, icons and buttons to black
YOU ARE AN ABSOLUTE GEM! IT WORKED! Thank you so much!
By the way, I have another problem. Do you know how do I make my all my tabs to have a customized photos like this?
The way I have now :
The way I wanted :
Hi, please add this more code
{%- if template.name contains 'collection' -%}
<style>
.header-wrapper .header__icon .icon,
.header-wrapper .list-menu span {
color: #151515 !important;
}
.section-header .header-wrapper {
background: transparent;
}
#MainContent {
margin-top: -44px;
}
#MainContent .collection-hero {
padding: 0;
}
#MainContent .collection-hero__inner {
max-width: 100%;
padding: 0;
}
#MainContent .collection-hero--with-image .collection-hero__text-wrapper {
padding: 0;
position: absolute;
top: 70%;
left: 50%;
z-index: 4;
text-align: center;
transform: translate(-50%, -70%);
}
#MainContent .collection-hero__image-container {
flex: 1 0 100%;
margin-left: 0;
min-height: 610px;
box-shadow: none;
border: none;
border-radius: 0;
}
@media (max-width: 749px) {
#MainContent .collection-hero__image-container {
min-height: 510px;
}
}
</style>
{%- endif -%}
Sorry Dan, may i know where should I paste the code? Because after I pasted it, the tab become like this when I hover. I think I pasted at the wrong line.
IT WORKED! But my logo color is not inverted colour when hover and the the tabs button is not in white colour when I don't hover at it.
THE LOGO IS NOW INVERTED COLOUR! THANK YOU! But the tabs are still dark colour not white when i don't hover.
IT WORKED! YOU ARE THE BEST! YOU'RE MY HERO! But may I ask how do I fix the issue below, when I scroll the text moves until header
