Smooth Logo Using Affix

DaveOzric
872 Posts
DaveOzric posted this 27 April 2019

Hello, I am still perplexed by this issue of the affixed logo.

Creative Caterpillar Dance

The first couple sites I did this on way back when had a smooth transition when you scrolled down the page. The new sites I make using this all are instant. I am just wondering if you could add a logo option as one of the options in the effects?

Thank you

Hello, I am still perplexed by this issue of the affixed logo. [Creative Caterpillar Dance][1] [1]: https://creativecaterpillarkids.com/ The first couple sites I did this on way back when had a smooth transition when you scrolled down the page. The new sites I make using this all are instant. I am just wondering if you could add a logo option as one of the options in the effects? Thank you
Vote to pay developers attention to this features or issue.
10 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 08 May 2019

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

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
DaveOzric
872 Posts
DaveOzric posted this 08 May 2019

   .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.

.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.
DaveOzric
872 Posts
DaveOzric posted this 08 May 2019

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

Does the width need a transition? The other site does not even have one.
Support Team
Support Team posted this 08 May 2019

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

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
DaveOzric
872 Posts
DaveOzric posted this 08 May 2019

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?

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?
Support Team
Support Team posted this 09 May 2019

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

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
DaveOzric
872 Posts
DaveOzric posted this 09 May 2019

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

firefox-2019-05-09-08-24-13.png

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;
    }

Hello, this is very close. We are very close, but for some reason the logo is smaller than the size I am entering in? !firefox-2019-05-09-08-24-13.png! 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

DaveOzric
872 Posts
DaveOzric posted this 09 May 2019

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.

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.
Support Team posted this 09 May 2019

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

Screenshot-1.png

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

Gina

The image shrinks due to padding of 5px set to the logo. When I disable it, image displays to its full size: !Screenshot-1.png! If there is an issue with proportions on any other site, please, provide the link. Gina
DaveOzric
872 Posts
DaveOzric posted this 09 May 2019

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

This seems to have solved this mystery!

Thank you!

OK, I'll add some padding to the header or something instead. This seems to have solved this mystery! Thank you!
You must log in or register to leave comments