Home>Support>How can I change the logo on stick menu / when scrolling?

How can I change the logo on stick menu / when scrolling?

By Dan, 6 years ago. Last reply by Alex S, 6 years ago.

Hi there,

It is currently set such that when I scroll down, the sticky header displays the same logo as in the actual header. I was wondering if there was anyway that I could have the top header display one logo and have the sticky header display a separate one.

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

  1. 6 years, 9 months ago Alex S
    Hi, I Work Here

    This is a copy of my premium support reply.

    Hi Dan,

    This is possible with CSS. Please add the following CSS to WP AdminAppearanceCustom CSS:

    #masthead.floating .site-branding img {
    	background: url('https://verstaan.com/wp-content/uploads/2017/01/GettyImages-514961877-oil-refinery-1550x804-1024x531.jpg') no-repeat; /* Change this to the image URL you wish to use */
    	padding-left: 62px; /* This hides the logo. Must be the  width of the image area */
    	background-size: 62px 70.52px; /* Only really useful if image is larger than the area as this will resize the image */
    	min-width: 62px; /* Required to prevent image from being too small after main logo is hidden */
    	min-height: 70.52px; /* Required to prevent image from being too small after main logo is hidden */
    }

    How does that look? Ideally, use a smaller image. You can adjust the above numbers but please be careful as you’ll need to adjust more than just one for the desired changes to look right. Also, please note that it’s not possible to give the background effect or anything like that – it’ll always suddenly appear.

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