[Resolved] Change header colour & transparency using CSS


  • Author
  • #10870



    I would like to know how to change the header colour and transparency using CSS. I would like the homepage to view similar to the below


    Thank you – George


    Andrew Misplon

    Hi George

    You could try something like this inserted into Customize > Additional CSS:

    .page-id-2 .site-header {
    .page-id-2 .site-content {
    	margin-top: -112px;

    2 in both rules needs to be changed to the page ID you’re targetting. To find a page id, go to Pages, edit the page and check the URL, the ID number is in the URL.

    The background color is background:rgba(0,128,0,.8);
    0, 128, 0 is the RGB value for the color.
    0.8 is the opacity.
    Both should be changed to suit your design.

    When editing the page you can use the Page Settings meta box in the right column to remove the page title and other page-related design tasks.

    Hope that helps 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Scroll to top