Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 27, 2023 at 11:21 am #1402615
    GavinGriffiths

    I want to make the header transparent on mobile as well as desktop. I’ve added the code in the Header documentation and it’s not showing on my phone (safari browser). On my desktop (using chrome browser) I can inspect it in mobile size and it’s working but it’s not overlaying the transparent header set-up (white font and white logo).

    Many thanks in advance!

    March 27, 2023 at 12:49 pm #1402632
    Ismael

    Hey GavinGriffiths,

    Thank you for the inquiry

    You can add this css code to make the header transparent and fixed on mobile view.

    
@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    March 27, 2023 at 6:11 pm #1402664
    GavinGriffiths

    That’s now showing transparent on mobile which is great but how do I get it to inherit the transparent header settings (white logo and white font colour)? Thanks!

    March 28, 2023 at 6:50 am #1402720
    Ismael

    Hi,

    Try to include the following css rules and placed it inside the css media query that we used above. 

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

.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate {
	display: block;
}

    This should hide the default logo on mobile view and display the alternate logo for transparent headers.

    Best regards,
    Ismael

    March 28, 2023 at 11:51 am #1402767
    GavinGriffiths

    I’ve put the following in. When I inspect it on Chrome it shows white logo but menu and search icon aren’t in white. Also not showing any difference on safari on my phone. Also when I inspect it in ipad size it isn’t transparent but the logo has gone white.

    @media only screen and (max-width: 767px) {

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

    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate {
    display: block;
    }

    .responsive #top #wrap_all #header {
    position: fixed;
    }

    .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
    }
    }

    March 29, 2023 at 10:41 am #1402875
    GavinGriffiths

    Hi,

    Just checking if possible to have the header transparent on ipad as well as mobile and also have the search icon and mobile menu icon appearing in white also as per the transparent header set-up.

    Many thanks!

    March 31, 2023 at 5:09 pm #1403128
    Mike

    Hi,
    Thanks for your patience and the link to your site please try adding this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 767px) and (max-width: 989px) { 
  .responsive #top #main {margin-top: -90px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  }
  @media only screen and (max-width: 989px){
.html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner, .html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner:before, .html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner:after {
    background-color: #fff;
}
}
  #top #wrap_all .av_header_transparency #menu-item-search a:before {
  	color: #fff;
  }

    After applying the css, please clearing your Autoptimize plugin and your browser cache and check.

    Best regards,
    Mike

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