Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 3, 2018 at 8:56 am #936371
    VCS33

    Hi,

    I am trying to get the header in mobile/tablet mode being slightly transparent (0.9). When I am adding it to the following snippet, the flyout gets transparent, too, which I don’t want.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    .html_header_top.html_header_sticky #top #main {
    padding-top: 200px !important;
    }
    }

    Thank you!

    April 3, 2018 at 4:23 pm #936643
    Vinay

    Hey VCS33,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #header_main {
    background: rgba(0,0,0,.9)!important;
}

    If this is not what you are looking for please be more specific with the requirement so we can help you better.

    Best regards,
    Vinay

    April 4, 2018 at 1:58 pm #937157
    VCS33

    Hi Vinay,

    I am not sure how to put it more specifically. The snippet you posted makes the header in desktop mode transparent, but not in tablet and mobile.
    I already achieved the transparent desktop header by adding this one, not sure if this is the right way, but it worked.
    .av_minimal_header .header_bg {
    opacity: 0.9;
    }

    What I would like to create is a slightly transparent header not only in desktop view but also on mobiles and tablets.

    Thanks and regards!

    April 5, 2018 at 11:22 pm #937935
    Basilis

    Hi,

    I cant login with the details you have provided.
    Can you please check those and let us know again please?

    Thank you

    Best regards,
    Basilis

    April 8, 2018 at 6:20 pm #938852
    VCS33

    User name and password I provided work perfectly.

    April 9, 2018 at 11:10 am #939061
    Victoria

    Hi VCS33,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen  and (max-width: 1024px) {
.responsive #top .header_bg {
    opacity: 0.8;
}}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 9, 2018 at 12:02 pm #939106
    VCS33

    PERFECT.

    Thanks a lot, Victoria!

    April 9, 2018 at 1:35 pm #939168
    Victoria

    Hi VCS33,

    Glad we finally got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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