-
Posts
-
Hello
I would like to implement a header that is on the top non transparent (dark grey) and towards the bottom gradiently transparent. The gradient transparency of the header should stay the same when scrolling down on the page. How can this be implemented with enfold?
Many thanks for your help with this!Hey Reto,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#header.header_color > .header_bg { background-image: linear-gradient(rgba(150,150,150,1), rgba(150,150,150,0)70%); background-color: transparent; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeThank you Mike for your advice!
Your css code works, once I start scolling down. When the page is initially loaded, the header is transparent (with a light color) and the logo in the header is bigger. When scrolling, the logo becomes smaller and the gradient transparent background is as I would like it.
Settings:
– in Worpress the “Header visibility and transparency is set to “Transparent and glossy header”
– Enfold under Header -> Header behaviour: Shrinking header is not checked.
How can I make sure that the Header displays correctly when initially loaded?I have used the following code:
#header.header_color > .header_bg {
background-image: linear-gradient(rgba(20,21,23,1), rgba(20,21,23,0)100%);
background-color: transparent;
I would like to make the top even less transparent. Is there a way to do this?One more question: I had defined a specific styling (font) for the H2 and H4 headers under “Advanced Styling”. After applying the changes to the header, these stylings (fonts) are not applied anymore. Do you know how I could fix this?
Many thanks in advance and please let me know if you need further information!
Hi,
Thanks for the feedback, typically when a transparent header is used there is a background image that is viewed under it, and in my tests the transparent gradient is not visible, probably because my examples are too dark. Perhaps if I could see your site it would help me understand better.
Note that the “Transparent and glossy header” adds color to the header which I expect to interfere with the css.
In my initial tests I used a “no transparency” header to show the transparent gradient, give this a try.Best regards,
MikeHi Mike
Thank you for your input, which helped ocating the problem. I tried with “no transparency header” and now I have a grey header background. The problem is, that the image on the first page does not continue into the header. Do you know how I could make the image (currently: color section background) extend into the header background or “behind” the header?Also I would like to the top of the header less transparent. Is there a way to have the top half solid and the bottom half gradient transparent?
Best regards,
RetoHi,
Please link to your site so we can examine the elements.
Perhaps a mockup of what you would like to see would also be helpful.Best regards,
MikePlease see link in private content. The section I am referring to starts with the entry “PERSONALIZED & DISCRETE APPROACH”.
There are two times six entries. The second set looks fine on a desktop. But not at all on a mobile device.Hi,
It looks like I’m redirected to a maintenance page, please include an admin login in the Private Content area so we can see your page.Best regards,
MikeHi Mike
Please find the credentials in the private content section. I am looking forward to your feedback.
This thread referes to the header problematic. Please ignore my message above, where Î mentioned “PERSONALIZED & DISCRETE APPROACH”….I mixed this up with another tread, sorry.Best Regards, Reto
Hi,
Thanks for the login, to have the top color section behind the header I set the header to Transparent Header, please check.
As for the “PERSONALIZED & DISCRETE APPROACH” columns the second set has different settings that the first set and the third set has Separator / Whitespaces in their own columns unlike the first set, try removing the second and third set of columns and cloning the first set two more times in the same color section so all of them are together.
Another option would be to remove all of the Separator / Whitespaces and use css for a top and bottom border for your text. Let us know if you want help with this css.Best regards,
MikeHi Mike, thank you for your help.
I was able to solve the issue with the “PERSONALIZED & DISCRETE APPROACH” columns.. and will apply it shortly.
Regarding the header: transparent looks better than what I had before (grey) but what I would like is that the header is with gradient transpareny all the time, also upon first loading or when scrolling to the very top. Do you know how I could achieve this?And my last objective for the header is that the top half is nontransparent and only the bottom half is gradient transparent. Is this possible?
Best regards
RetoHi,
To have your header gradient show before scroll try this css:#top #header.av_header_transparency .header_bg { opacity: 1; }If you plan to have pages where this is not applied, I recommend adding the page ID so to not add this to every page, like this:
#top.page-id-3290 #header.av_header_transparency .header_bg { opacity: 1; }To flip the header gradient colors, just swap the order of the colors in the above css, like this:
#header.header_color > .header_bg { background-image: linear-gradient(rgba(20,21,23,0) ,rgba(20,21,23,1)100%); background-color: transparent; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi Mike
I used the css with the page id and it works fine! Thank you very much.On the second question there seems to be a misunderstanding. I would not like to swap the gradient on the header, but to have the top half of the header without gradient, but in the color rgba(20,21,23,1). The lower part of the header should keep the gradient as currently implemented.
Do you understand what I mean? Can this be implemented?Best regards, Reto
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Gradient transparent permanent header’ is closed to new replies.