Hydra: Change masthead section background colour

Hi Wendy-

It doesn’t have to be one of the palette colors, you can choose. Hydra’s a little tricky because it uses JavaScript to change the background as your visitor scrolls down the page, so you’ll probably want two rules for this.

For the background before you scroll down, use this rule:

.palette-primary .site-header { background-color: rgba( 62,62,62,0.8 ) !important; }

The rule above is using the default color palette’s third color of #3e3e3e converted into RGBA so that the transparency of the original design is preserved.

For the background after you scroll down, use this rule:

header.smaller { background-color: #3e3e3e !important; }

Hi Wendy-

You’re right, I should have noticed that but I had already modified my header text in my testing site! Use code like this:

.palette-primary .site-header a,
.palette-primary .site-header a .fa, .palette-primary .site-header .site-description  {
    color: purple !important;
}

Simply change purple to your desired color in Hex or RGB value.
Edit: Updated this code to work for your site’s tagline, if you’re using it.

• This reply was modified 4 years ago by Jesse Owens. Reason: fix code