Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1493726

    Hi,

    I need the transparent header in mobile. I have add this code that I found in the documentation but can’t works.

    @media only screen and (max-width: 990px) {
    .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: absolute;
    }
    .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background: transparent;
    }
    }

    Could you help me?

    Many thanks,

    BR,

    Antonio

    #1493752

    Hey Antonio,

    Thank you for the inquiry.

    You can add this css code to switch the header to transparent in the mobile view.

    @media only screen and (max-width: 767px) {
    
      /* Add your Mobile Styles here */
      .responsive #top #wrap_all #header {
        position: fixed;
        background: transparent;
      }
    
      .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img,
      .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
        display: none;
      }
    
      .responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub,
      .responsive #top .av_header_transparency .logo img.alternate {
        display: block;
      }
    
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:hover .av-hamburger-inner,
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:focus .av-hamburger-inner,
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:hover .av-hamburger-inner::before,
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:focus .av-hamburger-inner::before,
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:hover .av-hamburger-inner::after,
      #top #header.header_color.av_header_transparency .av-main-nav>li>a:focus .av-hamburger-inner::after {
        background: var(--enfold-header-color-button-font);
        opacity: 1;
      }
    
      #top .header_color .av-hamburger-inner,
      #top .header_color .av-hamburger-inner::before,
      #top .header_color .av-hamburger-inner::after {
        background-color: var(--enfold-header-color-button-font);
      }
    }

    (see screenshot in the private field)

    Best regards,
    Ismael

    #1493769

    Hi Ismael,

    Look good but the pages that have not transparent header the icon burger change color and the page tittle is below the header.
    See the image attach.
    Many thanks,

    BR,

    Antonio.

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