I have a video playing in the background of my homepage and want the header to be transparent so the logo and menu is on the video when you land on it but then returns to white when you scroll. I have a reference website but im not sure about the rules about posting links here.
Also i would like, if its possible, to spread the menu items out more and for them to be on either side of the logo. Is this possible?
Any help at all would be greatly appreciated.
Hi @hausoframi Could you share your store URL?
https://www.hausoframi.com/ This is my store url.
https://www.norlha.com/ this is what im trying to do.
Thank you!
Hello @hausoframi
Apply these styles , it should work.
.header-wrapper color-background-1 gradient {
background-color: transparent;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
height: 80px;
transition: background-color 0.3s ease-in-out;
}
.header-wrapper color-background-1 gradient:hover {
background-color: white;
}
You’ll need the change the other header items styles to match with the hover effects.
And to spread out the menu items you can just increasing the padding of your menu-item:
.header__menu-item {
padding: 2rem 8rem 0 0 ;
}
You can adjust the styles according to your needs.
Thank you I will try that now. Could you tell me where to paste those lines of code? Thanks again!
You can add your code at the bottom of the base.css file in assets folder of your theme code OR you could search for the CSS selector (eg:- .header-wrapper color-background-1 gradient) by clicking CTRL + F in your base.css file. And add the above CSS code.
You can add these css as well to change the color of the menu items:-
.header__menu-item {
padding: 2rem 8rem 0 0 ;
color: white ;
}
.header__menu-item :hover{
padding: 2rem 8rem 0 0 ;
color: black;
}
Than
thanks for all your great advice. I seem to get this error when trying to increase the space between menu items. Also do i increase the 2rem part or the 0 part to increase spacing?
Please remove the previous code only this line : “.header__menu-item {padding: 20rem 20rem 0 0;}” wherever you’ve placed it
And write the css in the base.css folder:
Search for
header__menu-item in base.css and replace only the padding with this new line:
padding: 0px 45px 0px 45px;
header__menu-item {
padding: 0px 45px 0px 45px;
}
The padding style has 4 parameters: top right bottom left . Changing the right and left values will change the gap between the items horizontally.
This should fix the issue
Strangely I dont even have header__menu-item { in my base.css
I added header__menu-item { padding: 0px 45px 0px 45px; } to the bottom of base.css
the error is gone
however changing the numbers isnt doing anything.
You can try this. Add a desired gap here.
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
gap: 9rem;
}
This should work.
Unfortunately not… Im so sorry that this is taking up your time…