Change header color on scroll


I’m creating a child theme for Sydney and I would like to change the header color.

Now it is white and it becomes transparant when scrolling. I would like the reverse:
From complete transparent on load to white when scrolling.
And is it possible to change the logo on scrolling too?

With kind regards,


Dear Pip,

Could you please share your site’s URL here, so I can have a closer look?

> And is it possible to change the logo on scrolling too?

Yes, it is possible. Could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in footer:” box

jQuery(function($) {

  var newLogo = '';
  var oldLogo = $('.site-logo').attr('src');
  var headerFix = $('.site-header').offset().top;
  $(window).on('load scroll', function() {
    var y = $(this).scrollTop();
    if ( y >= 107 ) {
    } else {


Replace to your logo image path URL. You would upload it to media library (Dashboard > Media > Add New).

  1. Save settings


Dear Kharis,

It works! Thanks so very much for your quick answer.
I will rate your theme immediately with 5 stars.

Great support! Thanks again.

Best regards,


Dear Pip,

I am glad to know that.

Thank you for your rate. That’s very mean for us.


Trying to remember my password… Will rate as ASAP!

Thanks for the code to change the logo upon scrolling. It works on a browser but on a mobile device (tested on an iPhone) it does not change. The image is statically the oldLogo. This poses a problem as the sticky header is a different color. The temporary site is

Hello @whlemley,

Try adding the following custom CSS code through Appearance > Customize > Additional CSS.

@media only screen and (max-width:1024px){
  .site-header .col-md-4 a{
    display: block;
    width: 190px;
    height: 100px;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: contain;

  .site-header .col-md-4 a img{
    display: none;


I apologize if I have missed something in the above thread, but I do not see specifically where any code is provided to change the header color on a scroll. I saw the code to change PipB’s logo on a scroll, but not color.

I am interested in finding a way to have the initial header be semi-transparent to allow the menu items to show up a little better on top of the slider image, without covering the slider photos completely, but then I would like the header to switch to solid upon scrolling.

I currently have this CSS code entered in order to get the semi-transparent color initially:

.site-header {
background-color: rgba(238, 238, 238, 0.45) !important;

And I have my menu background in the customizer set to #eeeeee

My site is behaving fairly close to what I envision, but upon scrolling it is still just slightly transparent.
If it is possible, I would prefer that on scrolling, the header and menu be on a solid background that is completely opaque, using color #eeeeee.

The site I am working on is

Thank you! The support forum for this theme has helped me tremendously as I have switched themes and updated this site in the past few weeks.

Hello there,

First, I’d like to say you did an awesome site design with Sydney. I love it!

To change the header bar color upon scrolling, you need to add the below custom CSS code:

  background-color: #eeeeee !important;

If you need any other else, please feel free to open a new topic


Hi Karis,
I read carefully this post I paste code and works !!
What can I do to set up header transparent ?

Hello Chris,

Thank you for reaching out to us here.

So you want to have a transparent header bar even on mobile screen? Please advise.


This worked perfectly! and Thank you so much for such a kind and timely response!

You’re always welcome here.

If you don’t mind, could you please rate our Sydney theme here: like some of our users did? We would highly appreciate it if you do so.