Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 26, 2020 at 10:59 am #1188017
    elenapoliti

    Hi, I went through the various threads about transparency but didn’t find what I was looking for.
    I need to set transparency to the header ONLY on mobiles. For desktop and tablet screens the standard header is fine. However the CSS code to enable transparency on mobiles doesn’t work unless I select header transparency for the desktop screen.

    Any suggestions? Thanks very much!

    February 28, 2020 at 11:55 am #1188808
    Mike

    Hey Elena,
    Sorry for the late reply, on my localhost I set my home page to header not transparent and hide title and breadcrumbs for desktop, then to achieve a transparent header for mobile I added this css in the Quick CSS:

    @media only screen and (max-width: 766px) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  .header_color .header_bg {background-color: transparent !important;}
}

    If the doesn’t work for you please link to your page so we can investigate further
    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    February 28, 2020 at 12:09 pm #1188809
    elenapoliti

    Fantstic: it works fine!! Thank you very much

    February 29, 2020 at 11:01 am #1188997
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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