I'm using the sticky header option but would like to be able to set the background color of the header also for the initial position (which is by default transparent).
I already looked a bit into it and it seems you are modifying the element attributes directly for this. what would be an option to
have the sticky header on an initial load (without any scrolling) set to a half-transparent white background color?
default behaviour when loading the website, sticky header option active, background is transparent:
image 1:
once i start scrolling the sticky header background color is being animated from transparent to a target color (that i can set in the theme settings) , in this case white, until i get something like this: image 2:
what i would like is to have a start-background color (or alpha) for the header. so that image 1 would look more like this:
but the animation from 1 to 2 would still be happening...
Hi,
I'm using the sticky header option but would like to be able to set the background color of the header also for the initial position (which is by default transparent).
I already looked a bit into it and it seems you are modifying the element attributes directly for this. what would be an option to
have the sticky header on an initial load (without any scrolling) set to a half-transparent white background color?
Thanks!
Hi there,
I don't quite understand what you want to implement, but adding the CSS below to Custom CSS will add a background color to the sticky header:
.main-header.sticky-absolute { background: red !important; }If this is not what you asked for, then please try to include an online example of sketch it somehow so we can better understand you.
Best regards,
Laborator Team
default behaviour when loading the website, sticky header option active, background is transparent:
once i start scrolling the sticky header background color is being animated from transparent to a target color (that i can set in the theme settings) , in this case white, until i get something like this:
image 2:
what i would like is to have a start-background color (or alpha) for the header.
so that image 1 would look more like this:
but the animation from 1 to 2 would still be happening...
Hi again,
I don't know if this will work properly as I will need to see the site live, anyway try adding this to Custom CSS, it should work:
.main-header.sticky-initialized+.sticky-spacer { background: rgba(255, 255, 255, 0.5) !important; border-bottom: 1px solid #FFF; }Best regards,
Laborator Team
Hi again,
Try this CSS:
header.site-header.main-header.menu-type-standard-menu { background-color: rgba(255, 255, 255, 0.5) !important; border-bottom: 1px solid #FFF !important; transition: all 0.1s; } header.site-header.main-header.menu-type-standard-menu.is-sticky.sticky-fixed{ background-color: rgb(255, 255, 255) !important; }If this doesn't work then I am sorry but there is no other way to achieve the feature you want to implement.
Best regards,
Laborator Team
nice, works well enough!
thanks!
Happy to hear that, I will set this ticket as solved from here
P.S: If you like our theme, it would help us a lot if you could give us five star rating on themeforest from your Downloads tab.
A huge thank you from Laborator in advance!
Best regards,
Laborator Team