Change logo image while scrolling?

admin166
14 Posts
admin166 posted this 05 January 2018

Hi

I want a large logo-image in the header.
When I start scrolling, the logo should become small (it's another image)

In other words I have two pictures, the second should be replaced by the first one when scrolling.

Is anything like that possible?

Hi I want a large logo-image in the header. When I start scrolling, the logo should become small (it's another image) In other words I have two pictures, the second should be replaced by the first one when scrolling. Is anything like that possible?
Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 09 January 2018

Hi,

There is no such option in Themler, but you can try to use some code for that. You are using Sticky extension for the logo or header, right? Then you can use the CSS code with the .affix class to assign another image in the logo to the header when it is scrolled down.

Sincerely,
Hella

Hi, There is no such option in Themler, but you can try to use some code for that. You are using Sticky extension for the logo or header, right? Then you can use the CSS code with the `.affix` class to assign another image in the logo to the header when it is scrolled down. Sincerely, Hella
DaveOzric
721 Posts
DaveOzric posted this 10 January 2018

Can you explain this more? I want to do it too.

Thanks

Can you explain this more? I want to do it too. Thanks
DaveOzric
721 Posts
DaveOzric posted this 11 January 2018

http://answers.themler.io/articles/96208/change-header-height-on-scroll#example-1

This worked like a charm!

http://answers.themler.io/articles/96208/change-header-height-on-scroll#example-1 This worked like a charm!
Support Team
Support Team posted this 11 January 2018

Hi,

You are welcome. Nice to hear that it worked for you.

Sincerely,
Hella

Hi, You are welcome. Nice to hear that it worked for you. Sincerely, Hella
DaveOzric
721 Posts
DaveOzric posted this 11 January 2018

Super simple too. Thanks

Love the program a lot!!

Super simple too. Thanks Love the program a lot!!
DaveOzric
721 Posts
DaveOzric posted this 12 January 2018

Hello, another question related to this. How can I have a phone number that is text in the header and when scrolled it disappears or gets smaller?

Thank you

Hello, another question related to this. How can I have a phone number that is text in the header and when scrolled it disappears or gets smaller? Thank you
Support Team
Support Team posted this 12 January 2018

Hi,

The idea is the same as in the article above. You add the code with the .affix class name and the name of the class of the container with the phone number. Then use display:none; property to disable it when scrolled or font-size to define the new font size.

Sincerely,
Hella

Hi, The idea is the same as in the article above. You add the code with the `.affix` class name and the name of the class of the container with the phone number. Then use `display:none;` property to disable it when scrolled or `font-size` to define the new font size. Sincerely, Hella
You must log in or register to leave comments