Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • December 3, 2014 at 9:25 pm #362488
    bryan1976

    Hi,

    I am new to Enfold – my first ‘Premium’ Theme. I have done a few wordpress sites, but I don’t know much about CSS…yet ;-)

    I cannot find any posts specifically to help with placing an opaque header behind my logo and main menu.

    I would like the opaque white header background in front of the slider and the complete width of the page.

    Thanks you for your help.

    December 3, 2014 at 10:39 pm #362550
    mockingbirddistributionllc

    I had a similar question. Thanks for bringing it up.

    December 4, 2014 at 12:22 pm #362797
    bryan1976

    Hopefully we can get some support for this issue soon. I’m sure its a fairly simple solution when you know what to do.

    I did find this post here from February but having posted this into the quick CSS editor nothing changed:

    https://kriesi.at/support/topic/transparency-opacity-of-background-header-main-footer/

    Here is a link to my site. As you can see, I have been able to include an opaque header by designing the logo to be semi-transparent with a white background, but this is only to show what effect I am looking for. I need the entire header to be semi-transparent.

    http://theaudiobarn.co.uk/sample-page/

    Thanks in advance for the support!

    Bryan

    December 4, 2014 at 12:43 pm #362806
    Guenni007

    do you think about this nice feature:
    http://kriesi.at/themes/enfold-restaurant/

    then you can adjust transparency effect

    you find the definitions in layout.css

    #top .av_header_glassy.av_header_transparency .header_bg{background-color: #fff; opacity: 0.1; filter:alpha(opacity=10); }
#top .av_header_glassy.av_header_transparency #header_main{border-color: rgba(255,255,255,0.25); border-top-color: transparent;}
#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside{ border-color: rgba(255, 255, 255, 0.25); }
#top .av_header_glassy.av_header_transparency .social_bookmarks li,
#top .av_header_glassy.av_header_transparency .social_bookmarks li a{border-color: rgba(255,255,255,0.25); color:#fff;}
#top .av_header_glassy.av_header_transparency #header_main_alternate{border-bottom-color: rgba(255,255,255,0.25);}
    • This reply was modified 10 years ago by Guenni007.
    December 4, 2014 at 1:00 pm #362818
    Guenni007

    so you have to have a png file of your Logo (without Background) and a variant for the complete transparency if contrast isn’t big enough (as you can see in the demo-page above)
    On enfold theme options you can find the place where to set up the header/transparency options (alternate logo and Menu-color options)

    Then you can activate the transparency header options on each site you want.

    What i’m missing is the option to generally set the transparancy header by default

    December 4, 2014 at 2:34 pm #362854
    Yigit

    Hi!

    Please edit your page and choose to display transparent header under Layout section – http://i.imgur.com/07OuH1I.png
    Also please see – http://kriesi.at/documentation/enfold/portfolio-item/intro-to-the-header-configurator/

    Best regards,
    Yigit

    December 4, 2014 at 3:32 pm #362901
    bryan1976

    Hi Yigit!

    Thanks for your reply. I have spent hours playing with this setting you show, and I watched this video many times already!!

    Please note that a transparent header IS NOT the same as an opaque header. I believe I need something like rgba(255,255,255,0.75)

    Please see the effect I want on this website here:

    http://www.johncharlesphotography.com/

    On my home page, I want an Opaque white header under the menu and logo, BUT on top of the Layersliders.

    Thanks for your help.

    Bryan

    December 4, 2014 at 3:34 pm #362904
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av_header_transparency div#header_main {
background-color: rgba(255,255,255,0.75);
}

    Cheers!
    Yigit

    December 4, 2014 at 3:54 pm #362930
    bryan1976

    Hi!

    This is great!! Thank you.

    Is it possible to stop the header ‘flashing’ when you scroll up/down please?

    http://theaudiobarn.co.uk/sample-page/

    Thanks for your help.

    Bryan

    December 5, 2014 at 12:24 am #363338
    Ismael

    Hey!

    Disable the Shrinking Header setting on Enfold > Header > Header behavior panel.

    Cheers!
    Ismael

    December 5, 2014 at 12:49 am #363351
    bryan1976

    Hi Ismael!

    Perfect thanks. I disabled the sticking menu option and now working great!

    Finally on this…my other pages now have a ‘grey’ background for the header. How can this become white ‘solid’ color.

    Many thanks. Great support.

    Bryan

    December 6, 2014 at 2:20 am #363988
    Andy

    Hey!

    div#header_main {
background-color: white;
}

    Regards,
    Andy

    January 20, 2018 at 10:07 pm #900201
    rolfjackson

    Hi. I tried the transparency header setting and it worked like a charm. However, the secondary header (above the main header) does not seem to respond to this. Any idea how one can control the secondary header?

    Tx, Rolf

    January 20, 2018 at 10:25 pm #900209
    Mike

    Hi,
    Please try:

    div#header_meta {
background-color: transparent!important;
}

    Best regards,
    Mike

    January 21, 2018 at 12:06 pm #900336
    rolfjackson

    Thanks it worked. I changed it to:
    div#header_meta {
    background-color: rgba(220,220,220,0.4)!important;
    }

    Which also worked. There is a little snag though. When scrolling both menus reverts to the background color set in the styling section. And the setting above affects both modes.

    I managed to find a solution that provides a neat result. However, it would be useful to be able to control the color in the two modes (glass and standard) independently of each other as one can to a greater extent with the main menu.

    Thanks a lot for your help.

    January 21, 2018 at 2:20 pm #900357
    Mike

    Hi,
    Thank you for sharing your solution, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘help please – opaque header’ is closed to new replies.