Header Menu Background Color

  • Author
    Posts
  • #129874

    johsitfactor
    Member

    Hi there!

    I was wondering if there is a way to change the background color of the menu. I only want to change the menu background color on the homepage. I also want to reduce the opacity of the background color, but do not want to reduce the opacity of the text.

    I tried to use the following custom CSS, but found that it created the background color and opacity that I wanted; however, it also reduced the opacity of the text and the drop down menu boxes, which I didn’t want.

    /* Header Menu Background
    .site-header {
    background-color: #ec008c;
    opacity: 0.3;

    }

    */

    Thank you again!

    Jennie

    The blog I need help with is theitfactor.ca.

    #129881

    sakinshrestha
    Theme Author

    Hi Jennie,

    Try adding in the following css:

    .absolute-header .site-header {
        background-color: #ec008c;
    }

    Regards,
    Sakin

    #129886

    johsitfactor
    Member

    Hi Sakin,

    Thanks for the suggestion this solves my first problem of changing the header’s colour; however, I also wanted to reduce the header’s opacity to 0.3 without reducing the opacity of the text or the drop down menu boxes. How would you suggest to proceed?

    Thank you,

    Jennie

    #129891

    sakinshrestha
    Theme Author

    Hi Jennie,

    Than you can use the following css. In the following css, first 2 code 236, 0, 140 is color code and 0.3 is opacity. Right now it’s 30% opacity. You can change as per your need.

    .absolute-header .site-header {
        background: rgba( 236, 0, 140, 0.3 );
    }

    Regards,
    Sakin

    #130403

    johsitfactor
    Member

    Thanks so much Sakin!

    Jennie

The topic ‘Header Menu Background Color’ is closed to new replies.