Home>Support>Change background on masthead.site-header when it shrinks vertically

Change background on masthead.site-header when it shrinks vertically

By ptoolemy, 8 years ago. Last reply by ptoolemy, 7 years ago.

I’m using this css to make masthead.site-header half transparent:

#masthead.site-header {
  background: rgba(255, 255, 255, .5);
}

I also have the setting:
Menu Position
Overlaps Content

Then when scrolling down the page the masthead.site-header shrinks vertically. At this point I would like background being fully white:

#masthead.site-header {
  background: rgba(255, 255, 255, 1);
}

How do I accomplish that?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 12 days ago Alex S
    Hi, I Work Here

    Hi Ptoolemy,

    You should be able to do this by adding the following CSS to WP AdminAppearanceCustom CSS:

    #masthead.floating.site-header {
  background: rgba(255, 255, 255, 1);
}

    The floating class gets added to the masthead when the logo gets resized so you should be able to do this by writing a selector for that.

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 11 months ago ptoolemy

    Thanks!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More