Hello I am trying to modify the header behavior
I would like it to be:
My website is www.sosober.it
Password: mohwhi
Theme: Unveil
The main factor for header height is your logo. There is empty space in the image above and below the actual picture. You should be able to crop it in Shopify admin via “Edit image” button.
Crop as tight as you can – theme adds some vertical padding anyway…
As for the homepage transparent header, try this, in Customize:
<style>
.main-bar:not(.sticky--active) {
filter: invert(1);
transition: all 0.5s;
z-index: 2;
}
</style>
Thank you!
I think I did not explain myself correctly.
For the homepage I’d like it to be transparent only on the first hero banner and the when I scroll it comes back to the original set up (white background and black logo and icons).
Hope this can work with you!
Thanks again
Like this?
Yes exactly!
Thank you, can you give me the right code?
The code I gave you does that.
Thank you!
That’s perfect.
I just want to ask you whether it’s possible to put the icons a logos in white instead of using invert (the main color is dark grey so it does not change to white but to light grey).
Also, if possible use the same rule for mobile and tablet.
Thank you!
Just to add that now on desktop the hover is with black background and I’d like to be transparent until scrolling down that becomes white.
Thank you!
Your logo is an image, so you can’t simply put color: white; to control it.
But you can change filter property to make it brighter:
filter: invert(1) brightness(1.5);
Here is the additional code for keeping background transparent on hover:
.main-bar:not(.sticky--active):hover {
background: transparent !important;
}
Then some similar code for mobile navigation…
Combined, it will be this:
<style>
.main-bar:not(.sticky--active),
.mobile-nav__mobile-header:not(.sticky--active) {
transition: all 0.5s;
z-index: 2;
filter: invert(1) brightness(1.5);
}
.main-bar:not(.sticky--active):hover,
.mobile-nav__mobile-header:not(.sticky--active) {
background: transparent !important;
}
.mobile-nav__mobile-header {
position: absolute;
width: 100%;
}
</style>
Again, put this code instead of the old one in the “Custom liquid” code section added to Template area on homepage in Customize.
Thank you!
Last thing: I can I tell Shopify to do it only on the homepage?
In my solution above I’ve suggested a particular way of adding this code to your theme – in a “Custom liquid” section added to the homepage template.
Exactly because adding it to a Template area will only render this code on a page using this template – on homepage only.
If you add it to a layout/theme.liquid, it will apply to every page, so some conditional logic will be needed.
And most important – if you edit theme code it will make further theme updates much more complex.
Whatever you do in Customizer, will persist through theme updates.
I did but it remains white with white logos and icons and when I scroll it becomes black (as I wanted)
I just need to solve the transparent background at the beginning (also the cart number remains black at the beginning)
Thank you!
Ah!, I should’ve mentioned that “Banner” section should remain the first one in template area.
Only banner section can “underlay” below header.
Some themes do it this way, did not know about Drop.
So, drag this “Custom liquid” section you’ve added to be after the Banner.
This should fix it.