Smooth Logo Using Affix

Hello Dave,

I apologize for the delay.

My assumption is that you need to specify the width of your original affix logo to make the transition smooth, for example:

.affix-top [class*=bd-logo] {
width:200px;}

Gina
Themler Support

   .affix [class*="bd-logo"
    {
    height: 45px;
    width: 75px;
    -webkit-transition: height 400ms linear;
    transition: height 400ms linear;
    }
    .affix-top [class*="bd-logo"]
    {
    -webkit-transition: height 400ms linear;
    transition: height 400ms linear;
    }

There is a width per a different thread. It's gotta be some other setting. I cannot figure out how the other site does it.

Does the width need a transition? The other site does not even have one.

Dave, sorry, I haven't provied complete code. I was researching this and found solution that suggests adding width to the logo and making transition as "all" rather than "width", so for the current site this code should work:

.affix-top [class*=bd-logo] {
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
    width: 150px;
}

Could you please try it?

Gina
Themler Support

Sorry, are you saying to just use this new code only? It now does the opposite from the expected. It's small and then gets bigger.

It still does not transition smoothly.

Anyway you could text this on your end?

No, I meant to add this code in addition to what you have and replacing "height" with "all", so that complete code would be:

.affix [class*="bd-logo"]
    {
    height: 45px;
    width: 75px;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    }
    .affix-top [class*="bd-logo"]
    {
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
width: 150px;
    }

I tested it in a browser, it seemed working.

Gina

Hello, this is very close. We are very close, but for some reason the logo is smaller than the size I am entering in?

By adding the height it shrinks proportionally.

.affix [class*="bd-logo"]
    {
    height: 45px;
    width: 75px;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    }
    .affix-top [class*="bd-logo"]
    {
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
height: 90px;
width: 150px;
    }

Last edited 09 May 2019 by DaveOzric

So it also seems that this scaled size is not even, so the logo is out of balance and squished. On another site of mine it's highly noticeable.

The image shrinks due to padding of 5px set to the logo. When I disable it, image displays to its full size:

If there is an issue with proportions on any other site, please, provide the link.

Gina

OK, I'll add some padding to the header or something instead.

This seems to have solved this mystery!

Thank you!