Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 10, 2015 at 10:51 pm #485630
    M1000000

    I have read several posts on this but still unable to target underlying element.

    I want to add transparency to the header with rgba background in child css both when it’s full sized and when it’s shrunk and sticky.

    Header Behaviour Setting: Sticky header, Shrinking Header, unstick topbar – all checked.

    I am using :

    .header_color .header_bg{
    background-color: rgba(255,255,255,0.5);
    }

    Which seems to be setting the header overlay color – the header background set in admin/settings (or the default gray if none set) is still there beneath the full sized bg.

    I can’t for the life of me identify the element with this bg color to make it transparent – can you tell me what it is?

    Many Thanks.

    August 11, 2015 at 9:47 am #485794
    Rikard

    Hey M1000000,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    August 13, 2015 at 1:42 pm #487181
    M1000000

    Hi – link below – clean wp install / enfold demo content.

    August 13, 2015 at 1:49 pm #487185
    M1000000

    line 11 of child theme:

    .header_color .header_bg{
    background-color: rgba(255,255,255,0.5)!important;
    }

    does not over ride set bg color.

    August 13, 2015 at 6:11 pm #487361
    Dake

    Hi!

    First, please set your header to transparent or transparent and glassy:

    http://i.imgur.com/W8MzpNd.png

    Afterwards you’ll be able to edit the background color with the below css:

    #header {
    background-color: rgba(255,255,255,0.5)!important;
}

    Best regards,
    Dake

    August 16, 2015 at 12:57 pm #488359
    M1000000

    OK, I get this BUT – I want to use be able to use transparent header on some pages, this solution is at the expense of transparent header functionality across the site.
    I need a way to set transparency on the non transparent header only.

    Thanks.

    August 16, 2015 at 3:55 pm #488384
    Dake

    Hey!

    Well in that case you can set a page-id so the css I provided only affects specific pages that are using a transparent header.

    Example:

    .page-id-731 #header {
    background-color: rgba(255,255,255,0.5)!important;
}

    Regards,
    Dake

    August 16, 2015 at 7:01 pm #488419
    M1000000

    OK – thanks Dake – just to confirm (as this needs to be sitewide setting for me – i.e. all non transparent headers need to use my css background) there is no way to override the backgound color with child css on the header element unless the transparancy option is selected through the admin ui?

    August 16, 2015 at 10:40 pm #488446
    Dake

    Hey!

    The method I mentioned above is the simplest method via css.

    In order to have a nontransparent header behave like a transparent header (Automatically disable breadcrumbs and titles, slightly overlap content etc) you will need custom code.

    If you would like to go that route you can enlist the aid foa freelancer or make a feature request here.

    Please note that different pages can have different header settings and the css I provided can be applied to multiple pages at once.

    The css does no disable the normal use of the non or transparent headers.

    Best regards,
    Dake

    August 17, 2015 at 12:59 am #488480
    M1000000

    Understood – many thanks Dake. Do you provide any documentation / reference material for developers by the way?

    August 17, 2015 at 1:34 am #488482
    Dake

    Hey!

    You’re welcome, glad I could help :)

    Our WIP Enfold Documentation site can be found here.

    If you ever need help in the future, please let us know.

    Cheers!
    Dake

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