Logo Settings
The Logo Container can be found in the Header Container - #header
Note: Make sure you also add the Dark Logo which provides even more intuitiveness when you switch between Light/Dark Scheme. However, it is optional.
Usage
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="Canvas Logo">
</a>
</div>Extras
Retina Logo
If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo. Simply add the higher resolution image with 2x option in the Logo Image srcset
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="Canvas Logo">
</a>
</div>Sticky Logo
Define a new Logo Image with .logo-sticky Class to display a Different Logo on Sticky Headers
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
<img class="logo-sticky" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/logo-media@2x.png 2x" src="demos/media-agency/images/logo-media@2x.png" alt="Canvas Logo">
</a>
</div>Mobile Logo
Define a new Logo Image with .logo-mobile Class to display a Different Logo on Mobile Devices
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
<img class="logo-mobile" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/logo-media@2x.png 2x" src="demos/media-agency/images/logo-media@2x.png" alt="Canvas Logo">
</a>
</div>The Mobile Logos are displayed on Devices below the user defined breakpoint.