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" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" 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. Use the code mentioned below instead of the above code:
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/[email protected]"><img src="images/[email protected]" alt="Canvas Logo"></a>
</div>Use the data-sticky-logo Attribute on the #logo Element to display a Different Logo on Sticky Headers
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png" data-sticky-logo="images/logo-sticky.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/[email protected]" data-sticky-logo="images/[email protected]" ><img src="images/[email protected]" alt="Canvas Logo"></a>
</div>Use the data-mobile-logo Attribute on the #logo Element to display a Different Logo on Mobile Devices
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png" data-mobile-logo="images/logo-mobile.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/[email protected]" data-mobile-logo="images/[email protected]" ><img src="images/[email protected]" alt="Canvas Logo"></a>
</div>Last Modified: June 2, 2020