Change logo image while scrolling?

admin166
16 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.
10 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
788 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
788 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
788 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
788 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
Web IT Solutions LLP
302 Posts
Web IT Solutions LLP posted this 01 July 2018

Hello All,

I love this and used it for the first time, amazing....

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

Thanks for this link to showcase to Mr. Dave & Themler Technical Team (Hella) etc...

Is there any way to make it fully automatic instead of adding the script as below

.affix [class*="bd-logo"]
{
height: 100px; 
-webkit-transition: height 300ms linear;
transition: height 300ms linear;
}

.affix-top [class*="bd-logo"]
{
-webkit-transition: height 300ms linear;
transition: height 300ms linear;
}

1) Is the implemented in the new release of Themler tool?

If yes, kindly share the step by step process to achieve the same.

2) And, can we achieve the same animation in Mobile version too?

Regards
Suffian Ahmed

Hello All, I love this and used it for the first time, amazing.... http://answers.themler.io/articles/96208/change-header-height-on-scroll#example-1 Thanks for this link to showcase to Mr. Dave & Themler Technical Team (Hella) etc... Is there any way to make it fully automatic instead of adding the script as below .affix [class*="bd-logo"] { height: 100px; -webkit-transition: height 300ms linear; transition: height 300ms linear; } .affix-top [class*="bd-logo"] { -webkit-transition: height 300ms linear; transition: height 300ms linear; } 1) Is the implemented in the new release of Themler tool? If yes, kindly share the step by step process to achieve the same. 2) And, can we achieve the same animation in Mobile version too? Regards Suffian Ahmed

Last edited 01 July 2018 by Web IT Solutions LLP

Vitaliy WD
311 Posts
Vitaliy WD posted this 01 July 2018

Is the implemented in the new release of Themler tool?

Themler now on hold due all developers gone to Nicepage project. Please ask to come back developers back to Themler. The main reason of Nicepage development: some Themler users ask for a more simple tool, to generate (not to build) webpages with few clicks. So we need to proof than there still many users who want work with Themler instead of Nicepage.

> Is the implemented in the new release of Themler tool? Themler now on hold due all developers gone to Nicepage project. Please ask to come back developers back to Themler. The main reason of Nicepage development: some Themler users ask for a more simple tool, to generate (not to build) webpages with few clicks. So we need to proof than there still many users who want work with Themler instead of Nicepage.
Support Team
Support Team posted this 02 July 2018

Hi,

Is the implemented in the new release of Themler tool?

No, unfortunately.
In fact, it is quite difficult to implement it in Themler UI. The task to change something on page scroll may include hundreds of features which may affect almost all Themler controls. And all features that you may imagine should be compatible with Sticky extension. I don't think that it is possible. Therefore, if we implement it in Themler this feature will be quite limited and you will ask us to add more and more features. This will cause a lot of more problems. In this case the manual solution is better because it does just what you need and nothing more.

Thank you,
Olivia

Hi, > Is the implemented in the new release of Themler tool? No, unfortunately. In fact, it is quite difficult to implement it in Themler UI. The task to change something on page scroll may include hundreds of features which may affect almost all Themler controls. And all features that you may imagine should be compatible with Sticky extension. I don't think that it is possible. Therefore, if we implement it in Themler this feature will be quite limited and you will ask us to add more and more features. This will cause a lot of more problems. In this case the manual solution is better because it does just what you need and nothing more. Thank you, Olivia
You must log in or register to leave comments