Dark toned header on mobile

#1

Hi,

When I view my page - www.beyondrational.com - on mobile, the header has a dark overlay.

PNG
IMG_0531.PNG.jpg1242×2208 266 KB

I would like the header to behave similar to when the site is viewed on desktop - where the header area is transparent.

also, is it possible to turn the hamburger menu into sticky on mobile?

Thanks!
/Morten

#2

Hello Morten,

To accomplish it, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1199px) {
      .menuStyle1.page-template-template_page-builder .site-header {
        background-color: #fff;
      } 
      .mobile-menu-toggle_lines,
      .menuStyle1 .mobile-menu-toggle_lines:before, .menuStyle1 .mobile-menu-toggle_lines:after {
        background-color: #000 !important;
      }  
    }

    @media only screen and (max-width: 1023px) {
      .site-header {
        position: fixed !important;
      }
    }

Regards,
Kharis

#3

Sir I want to change transparent color how can I change it to transparent