Change logo image while scrolling?

admin166
13 Posts
admin166 posted this 2 weeks ago

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

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
662 Posts
DaveOzric posted this 6 days ago

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
662 Posts
DaveOzric posted this 6 days ago

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 6 days ago

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
662 Posts
DaveOzric posted this 6 days ago

Super simple too. Thanks

Love the program a lot!!

Super simple too. Thanks Love the program a lot!!
DaveOzric
662 Posts
DaveOzric posted this 5 days ago

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 5 days ago

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