Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #506625

    Hi I have a transparent header and styled it grey with

    .av_header_glassy.av_header_transparency #header_main {
        background-color: rgba(0, 0, 0, 0.4);
    }

    The problem is on the iphone and small screens it changes to an opaque grey header.
    What have I done wrong?
    http://www.walnut-tree-inn.co.uk/wp/

    #506634

    Hi fanlokbun!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
        background-color: transparent;
        position: absolute!important;
    }}

    Regards,
    Yigit

    #506657

    Thanks Yigit

    It is now transparent but is showing the wrong icon. ie NOT the one from Transparency Options.

    Rob

    #506661

    … Also the top of the headings now appear under the nav bar.

    #506832

    Hi,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    #506954

    Many thanks
    Rob

    #507733

    Hi!

    1.) Are you talking about mobile menu icon? did the other one show up before? does it show up again when you remove the custom CSS code we provided you in this thread?

    2.) Try this code to move the content down a bit:

    .av-special-heading.av-special-heading-h1.custom-color-heading.blockquote.modern-quote.avia-builder-el-1.avia-builder-el-no-sibling.av-thin-font.av-inherit-size {
    margin-top: 52px;
    }
    

    Cheers!
    Andy

    #507751

    Hi Andy,

    The background doesn’t need to be transparent. I have done other installs with enfold and the white bar at the top on mobiles is white and they look fine. The problem here is the grey I have applied to the transparent header is being applied to the white mobile header. Vigit’s fix above was great, it gives me the same transparrent header as on full screen view except that it is showing the icon for the white background not the one in Theme Options – Transparency Options as it should.

    In short on mobiles I either want:
    white header (not grey) with main Logo (black)
    or
    transparrent header with the Transoparency Options logo (white)

    Thanks

    Rob

    #508450

    Hey!

    it won’t work, cause it’s not meant like this for mobile devices. However, follow this tutorial: http://kriesi.at/documentation/enfold/change-logo-on-mobile/

    Cheers!
    Andy

    #508668

    Sorry I think we are on crossed lines. I have got rid of the grey by adding this:

    @media only screen and (max-width: 767px) {
    .av_header_glassy.av_header_transparency #header_main {
        background-color: #ffffff;

    Problem solved.
    Thanks for you hep
    Rob

    #508879

    Hi!

    Cool! Glad we could help. :)

    Cheers!
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Opaque header on small screens’ is closed to new replies.