Resize logo in header on scroll

[frankburder]

Hello,

I have a custom header built (header 2) and I’ve been able to have the overall height of the header shrink on scroll, but the logo isn’t resizing with the content. Any ideas? I’ll post login credentials below.

[nico]

Hi @frankburder,

Thanks for writing in.

You can check the link below on how to setup logo shrinking on PRO.

Shrink-menu-logo-upon-scroll-down-back-to-full-size-at-top-again-smoothly

Hope it helps.

Let us know how it goes.

Thanks.

[frankburder]

Thanks for the quick reply. See attached screenshot. I have my settings exactly like you sent but the logo isn’t resizing. The bar resizes, but not the logo.

[frankburder]

I also just noticed that my dropdown is being cut off in the header now as well. Can you point me to that setting?

[thai]

Hi There,

Please add this custom CSS:

.x-bar .x-image img {
    -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
.x-bar.x-bar-fixed .x-image img {
    height: 85px;
}

And turn off the Content Scrolling option.

Hope it helps

[frankburder]

That did it - Thanks!!

Any way to have the logo “animate” as it scales down instead of jumping like it does now?

[Joao]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by PRO. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. PRO is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!