Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 1, 2025 at 2:30 am #1489698
    jaimemerz

    I found a few threads that mention this topic however none that I could easily find that addresses my specific issue. I was able to follow the header documentation on how to turn my header transparent on mobile, however what I need is not just the background to be transparent but the whole transparent header to be present on mobile including the hamburger being white and the transparent logo. Right now the logo and hamburger get lost. I love how when you start to scroll the white header appears so I dont’ want to change that, on load I just want it to have the transparent header. Possible?

    • This topic was modified 5 days, 22 hours ago by jaimemerz.
    October 1, 2025 at 3:48 am #1489701
    Mike

    Hey jaimemerz,
    For mobile, this css will make your buger menu white before scroll and black when the menu opens, then gray after scroll and gray when open. It will also show your white logo befor scroll, and the black one after scroll. It will also change the special heading line height so it is not behind the burger menu & logo.

    @media only screen and (max-width: 479px) {
    #top #wrap_all .av-special-heading.av-mayes0t2-0bf965b2b1bd5112e17bb591eb31930e .av-special-heading-tag {
        line-height: 35px;
    }
    #top .av_header_transparency .av-hamburger-inner,#top .av_header_transparency .av-hamburger-inner::before, #top .av_header_transparency .av-hamburger-inner::after {
  background-color: #fff !important; 
  }
  #top .av_header_transparency .is-active .av-hamburger-inner,#top .av_header_transparency .is-active .av-hamburger-inner::before, #top .av_header_transparency .is-active .av-hamburger-inner::after {
  background-color: #000 !important; 
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate {
  	display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img {
  	opacity: 0 !important;
  }
}

    After applying the css, clear your browser cache & check.

    Best regards,
    Mike

    October 1, 2025 at 7:52 pm #1489732
    jaimemerz

    Thank you Mike! That worked!

    October 2, 2025 at 1:59 am #1489733
    Mike

    Hi,
    Glad that we could help.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Transparent Header on Mobile’ is closed to new replies.