Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 21, 2015 at 7:16 pm #506625
    fanlokbun

    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/

    September 21, 2015 at 7:42 pm #506634
    Yigit

    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

    September 21, 2015 at 8:33 pm #506657
    fanlokbun

    Thanks Yigit

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

    Rob

    September 21, 2015 at 8:36 pm #506661
    fanlokbun

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

    September 22, 2015 at 9:15 am #506832
    Rikard

    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

    September 22, 2015 at 12:19 pm #506954
    fanlokbun

    Many thanks
    Rob

    September 23, 2015 at 1:39 pm #507733
    Andy

    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

    September 23, 2015 at 1:57 pm #507751
    fanlokbun

    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

    September 24, 2015 at 2:14 pm #508450
    Andy

    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

    September 24, 2015 at 7:23 pm #508668
    fanlokbun

    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

    September 25, 2015 at 10:32 am #508879
    Ismael

    Hi!

    Cool! Glad we could help. :)

    Cheers!
    Ismael

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