Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 5, 2017 at 3:38 pm #860613
    Swbride

    Hi

    I’m trying to make the header transparent on mobile with the white logo and menu.
    How do I do this?

    Thanks

    October 5, 2017 at 3:48 pm #860616
    Swbride

    using this css makes it transparent, but the logo and menu remain black

    @media only screen and (max-width: 767px){
    .html_header_top.html_header_sticky #top #wrap_all #main {
    margin-top: -143px;
    }
    .responsive #top #wrap_all #header {
    background: transparent;
    }
    }

    the page also seems to glitch when you scroll down

    October 5, 2017 at 4:08 pm #860632
    Yigit

    Hi,

    Can you please post a link to your website?

    Best regards,
    Yigit

    October 5, 2017 at 4:13 pm #860635
    Swbride

    http://www.baddream.co.uk

    • This reply was modified 7 years, 1 month ago by Swbride.
    October 5, 2017 at 10:35 pm #860767
    Swbride

    anything?

    October 6, 2017 at 12:38 pm #860980
    Victoria

    Hi,

    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: 767px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
      margin-top: -189px;
}
#top #wrap_all .av_header_transparency {
    background-color: transparent;
}
}

    But then your logo and the burger menu become almost invisible.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 6, 2017 at 4:24 pm #861067
    Swbride

    Hi, this works to an extent but, I need the logo and burger to be white, as in transparency mode… like this (it works as you shrink the screen size or view landscape on a tablet) how it should look

    Also, the page seems to jump as you scroll down on mobile. It seems to be as the white background pops back up. Could this be disabled or, would it be better to just specify transparent header on mobile with white burger and alternate (white) logo?

    Thanks

    October 8, 2017 at 9:28 pm #861674
    Swbride

    Or could you maybe just give me the relevant css hooks?

    October 10, 2017 at 6:27 am #862292
    Ismael

    Hi,

    Please add the following css codes.

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    position: fixed;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

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

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

.responsive #top .av_header_transparency.av_alternate_logo_active.header-scrolle
 .logo a > img {
    opacity: 1;
}

#top .header_color.av_header_transparency .av-hamburger-inner, #top .header_color.av_header_transparency .av-hamburger-inner::before, #top .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #ffffff;
}
}

    Best regards,
    Ismael

    October 10, 2017 at 9:11 pm #862664
    Swbride

    Thats great! Thanks!

    October 11, 2017 at 2:57 pm #862909
    Rikard

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    October 16, 2017 at 10:15 pm #864979
    Swbride

    Hi Rikard

    Yes you can close it but first….. Is there some kind of attribute/id/class referance for enfold anywhere?

    Thanks

    October 16, 2017 at 10:50 pm #864997
    Jordan Shannon

    Hi,

    Unfortunately there is not. Due to the advancement of most browser inspectors, those all can be found pretty quickly. However, if you would like to see a reference you can certainly add it to the feature request queue https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Jordan Shannon

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