This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Resolved 2 replies customizationthemetheme-north
ptoolemy
9 years ago · Last reply by ptoolemy 9 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.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 9 years, 5 months ago

    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. ptoolemy 9 years, 4 months ago

    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.

Have a different question or issue?

Start New Thread