Smooth Logo Using Affix

DaveOzric
838 Posts
DaveOzric posted this 4 weeks ago

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 2 weeks ago

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
838 Posts
DaveOzric posted this 2 weeks ago

   .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
838 Posts
DaveOzric posted this 2 weeks ago

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 2 weeks ago

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
838 Posts
DaveOzric posted this 2 weeks ago

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 2 weeks ago

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
838 Posts
DaveOzric posted this 2 weeks ago

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 2 weeks ago by DaveOzric

DaveOzric
838 Posts
DaveOzric posted this 2 weeks ago

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 2 weeks ago

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
838 Posts
DaveOzric posted this 2 weeks ago

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