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.
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
</a>
</div>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/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
</a>
</div>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/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-sticky" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/[email protected] 2x" src="demos/media-agency/images/[email protected]" alt="Canvas Logo">
</a>
</div>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/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-mobile" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/[email protected] 2x" src="demos/media-agency/images/[email protected]" alt="Canvas Logo">
</a>
</div>Last Modified: March 10, 2023