Reduce image in header when home is scrolled

When I scroll the home page, the header area is a little shrunk, but not the image. How can I shrink both the image and header so that the image is reduced to roughly the vertical size of the menu items (which also are not shrunk, but appropriately so because smaller might make it too hard to read).

This ultimately is related to the post I just made about making the initial image display the true (and larger) size of the image (not cropped) in the post https://athemes.com/forums/topic/image-in-header/. Once I can it to the correct initial size, I’ll want to then shrink vertically (and, of course, scaled) to about the size of the menu items.

See https://www.screencast.com/t/Xvri84wHri.

Hello Rob,

Can you please provide a link to your website?

Kind Regards, Roman.

https://stage.shapiro.cloud/

If you need admin access, where can I send you the details privately?

Hello Rob,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

.header-scrolled .custom-logo {
    height: 52px;
    width: 150px;
    transition-duration: 0.5s;
}

.custom-logo {
    transition-duration: 0.5s;
}

Kind Regards, Roman.

Hi Roman,

SO CSS is telling me that this is invalid code. See screenshot showing the errors: https://www.screencast.com/t/lo0pLjh6

Rob->

Hello Rob,

I’m not sure why it shows these warnings.

Did you try whether that CSS code works?

Kind Regards, Roman.

Hi Roman,

I tried again and this time SO CSS did not complain, but it did not work. What I discovered is that some of the CSS needs !important to work. Here is the full code that works perfectly for displaying the logo at a larger size and then reducing it to a smaller size when scrolled:

/* Logo changes */

.custom-logo-link img {
  width: 233px !important;
  height: 84px !important;
  content: url("https://shapiro.cloud/wp-content/uploads/2017/04/shapiro-cloud-5_25per.png") !important;
  margin-left: 0px;
}

.header-scrolled .custom-logo {
    height: 52px !important;
    width: 150px !important;
    transition-duration: 0.5s !important;
}

.custom-logo {
    transition-duration: 0.5s !important;
}

I will comment about CSS content in the thread where we talk about doing this.

Rob->

Okay Rob, it’s great that it works now.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.