Transparent Header & Sticky Header with two different Logos

Question

Hi Guys,

first of all my respects to your Template, nice work!

I have a question concerning the header and the Logo's. When you open my page you will start with a Transparent header and a parallax. When you scroll down the header will change to a sticky header and the logo will resize to a smaller logo.

Does the template also allow to use switch to a different (smaller) logo when the users scrolls down and the header switches from transparent to sticky?

Cheers,

Johfra

SemiColonWeb · Accepted Answer

Hello,

Thank You so much for the Kind Words! :)

Yes IT DOES! :) You can simply use the following code:


	[
![attachment](images/logo.png)
](index.html)
	[
![attachment](images/logo@2x.png)
](index.html)

Currently Canvas supports the following Logo Options:
data-dark-logo - Shown on Dark Layouts/Headers
data-sticky-logo - Shown on Sticky Headers
data-mobile-logo - Shown on Responsive Menus

Hope this Helps!

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

JohfradK · Answer

Thanks for the code and it also works great but then only in the dark version. As soon as you start using the "default" header the option "data-dark-logo" does not work as it is not a "dark" theme. Is there no code for the default full header so that I can start with a different logo and as soon as they start scrolling it switches to the smaller version.

The attached screenshot shows how it should work but then the top should then have a white background.

JohfradK · Answer

Hi Guys, haven't had a reply until now. Is it possible what I am asking? Would be great if you guys could help me out : ) Thanks in advance. Cheers, Johfra

JohfradK · Answer

Saw that it was on resolved. Changed the status to unresolved.

Semicolon Web · Answer

Hello,

Apologies about the Delays. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

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

JohfradK · Answer

Hi Peeps,

Sorry for my delay, was busy.

Off course, here is the URL: http://creaventing.wave.gmbh/final/index.html

When the page is opened my Logo with Name should be visible but when you scroll down and the header is resized the logo should change to the logo without my name.

Cheers,

Johfra