Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 6, 2025 at 7:48 am #1478730
    THP Studio

    Hey guys,

    I’ve found a few older forum threads and tried the code but can’t seem to get it to work.

    Client wants a transparent header (only on homepage, so it’s set on a page level, not site wide). Also wants it on mobile.

    I’ve got it displaying transparent on mobile using code I found in the forum:

    /* Transparent Header For Mobile */
@media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { 
        position: absolute;
}}

@media only screen and (max-width: 768px) {
#top #wrap_all .av_header_transparency {
	background: transparent;
}}

    But cannot get the logo to use the transparent one set in the theme settings. I tried using code from this thread but couldn’t get it to work:

    Transparent Mobile Header & Logo

    We need the white version of the logo to display on mobile, not the black one.

    Could you take a look in private and see what we need to do?

    Thanks

    Tim

    March 8, 2025 at 5:49 pm #1478908
    Mike

    Hey Tim,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
    opacity: 0;
}

.responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block;
}
}

    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,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.