Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 30, 2016 at 7:04 pm #625101
    MindSpark

    Hi again.

    I am using transparent header with centered logo and menu below option. I have forced the header to remain transparent when scrolling. But when resizing my browser to check how the page layout changes – simulating responsive / mobile view, the header reverts to the standard opaque look.

    question: how do I keep the header transparent all the time, regardless of screen size or device view?

    here is what I have tried so far – but it doesn’t seem to be working:

    ‘@media screen and (max-width: 989px) {
    #header_main, .header_color div { border: none !important; }
    .header_color .header_bg { background: transparent url(”) top left repeat-x scroll; border-bottom: none; }
    }

    @media screen and (min-width: 480px) and (max-width: 767px) {
    #header_main, .header_color div { border: none !important; }
    .header_color .header_bg { background: transparent url(”) top left repeat-x scroll; border-bottom: none; }
    }

    @media screen and (max-width: 479px) {
    #header_main, .header_color div { border: none !important; }
    .header_color .header_bg { background: transparent url(”) top left repeat-x scroll; border-bottom: none; }
    }’

    thanks in advance for your help!

    April 30, 2016 at 7:23 pm #625106
    Basilis

    Hey MindSpark,

    do u mind we also see your web site, so we can know which header classes are been used, is that possible?
    Thanks a lot for your time and patience

    Best regards,
    Basilis

    April 30, 2016 at 8:08 pm #625116
    MindSpark

    oops…. here’s the URL: http://mindsparklabz.com/dev/onswann

    May 3, 2016 at 6:56 am #626231
    Vinay

    Hi,

    Please replace the custom css used earlier with the one below.

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

    You can manipulate most of the option in Enfold >General Styling > Logo Area

    To achieve something similar to the screenshot below :

    Please enable custom css class support and add a custom class to the first colorsection right below the menu.

    .custom-class{
margin-top:-100px;
}

    Please adjust the margin top to match the header height.

    By default the logo area has no background below it. so we need to use a -ve margin to push the colorsection to the top of the page.

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    If you have more questions please feel free to get in touch with us.

    Thank you for using Enfold :)

    Best regards,
    Vinnie

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