Tagged: header, second logo, transparency, transparent logo
Hello,
I have created a website for a client project with 2 logos (both clickable with different landing pages) in the header. On the left the first logo, in the middle the menu and on the right the second logo. This worked great with your instructions (https://kriesi.at/documentation/enfold/example-of-logo-left-menu-center-widget-right/).
In the next step I want to adapt the second logo to the transparent menu, so that it behaves like the first logo and is white when the background is transparent (extra logo) and becomes colored when scrolling down, when the menu switches.
How can I set the second logo to behave like the first logo?
Thanks in advance!
Hey Jens,
Thank you for the inquiry.
The following css code should work, just replace the red background with an image and adjust the other properties as required.
.responsive #top .av_header_transparency #header_main .inner-container .widget a img {
opacity: 0;
}
.responsive #top .av_header_transparency #header_main .inner-container .widget a:before {
content: '';
width: 100px;
height: 30px;
background: red;
display: block;
position: absolute;
}
Best regards,
Ismael