navbar Scroll to change logo pictures

3 replies·opened Feb 23, 2021
J
jianyinliFeb 23, 2021

hi
i'm new canvas user , How can I use canvas class to make the effect of transforming the logo image ?
Where can I refer to relevant documents on canvas ?

S
SemiColonWebSTAFFFeb 23, 2021

Hello,

Simply add the data-sticky-logo="your-sticky-logo.png" Attribute to your Logo Images. Example:

<!-- Logo
============================================= -->
<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png" data-sticky-logo="demos/media-agency/images/logo-media.png" data-mobile-logo="demos/media-agency/images/logo-media.png"><img src="images/logo.png" alt="Canvas Logo"></a>
	<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png" data-sticky-logo="demos/media-agency/images/logo-media@2x.png" data-mobile-logo="demos/media-agency/images/logo-media@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
jianyinliFeb 24, 2021

thank you very much ! i try it now and My problem is solved !

S
SemiColonWebSTAFFFeb 24, 2021

Hello,

Very Happy to Help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard