Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 13, 2022 at 11:36 am #1335380
    kazumakitajima

    Hi there,

    I want to keep my header logo, the transparent logo file, on scroll for mobile only.

    Right now, I have my header turning from transparent logo to normal logo file on scroll for mobile and desktop. But I want to keep it the transparent logo file even on scroll for mobile only. How could I achieve this? Thank you

    January 14, 2022 at 8:01 am #1335522
    Ismael

    Hey kazumakitajima,

    Thank you for the inquiry.

    We may need to inspect the site first in order to provide an appropriate solution. Please post the site details in the private field.

    Did you set the page to have a transparent header? Try to use this css code to hide the default logo and display the alternate. 

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

.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a .subtext > img {
    opacity: 1;
    display: block;
}
}

    Best regards,
    Ismael

    January 14, 2022 at 8:04 am #1335523
    kazumakitajima

    Hi Ismael,

    Sorry, my header currently is transparent and the default logo switches to alternative (transparent logo) on scroll for both mobile and desktop.

    However, I want to keep it at the alternative (transparent logo) on scroll for both mobile and desktop. Will the CSS you mentioned above work for this? Thank you

    January 14, 2022 at 12:22 pm #1335565
    Ismael

    Hi,

    Thank you for the update.

    Yes, the css code above should hide the default logo and display the alternative logo for transparent headers. But only when the screen width is less than or equal to 989px. If you want to apply it on larger screens as well, just move css rule outside the css media query.

    .responsive#top .av_header_transparency.av_alternate_logo_active .logo a > img, .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
}

.responsive #top .av_header_transparency.av_alternate_logo_active .logo a .subtext > img {
    opacity: 1;
    display: block;
}

    Best regards,
    Ismael

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