Logo Settings

The site logo lives in <div id="logo">. Canvas supports multiple logo images in the same block so the correct one shows in different states: default, dark scheme, sticky header, and mobile. The Logo module reads which variants you included and generates the CSS to swap them automatically.

Standard markup

A minimal logo with just the default image:

<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">
    </a>
</div>

The srcset with the 2x descriptor is how Canvas serves a retina (high-DPI) logo. Provide a standard image and a @2x image that is exactly double the pixel size.

All logo variants

Add extra <img> tags with the variant classes and Canvas will show each one in the right context:

<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">
        <img class="logo-sticky" srcset="images/logo-sticky.png, images/logo-sticky@2x.png 2x" src="images/logo-sticky@2x.png" alt="Canvas Logo">
        <img class="logo-mobile" srcset="images/logo-mobile.png, images/logo-mobile@2x.png 2x" src="images/logo-mobile@2x.png" alt="Canvas Logo">
    </a>
</div>

What each variant does

logo-default is the base logo, shown when no other state applies.
logo-dark is shown when the header is in a dark scheme (inside .dark header wraps). Add this so your logo stays visible on dark backgrounds.
logo-sticky is shown once the header becomes sticky (.sticky-header). Use it if your sticky header has a different background.
logo-sticky-shrink is shown when a shrinking sticky header is active (.sticky-header-shrink).
logo-mobile is shown on smaller screens where the expanded menu is not active. Handy for a compact or icon-only mark.

Tips

You only need to include the variants you actually use. If you omit logo-dark, Canvas simply keeps showing the default logo in dark headers.
Keep every variant the same height so the header does not jump when logos swap.
The alt text should describe your brand, not just say "logo", for better accessibility and SEO.

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

Serve a crisp logo on high-DPI (retina) screens using the standard srcset 2x descriptor. Canvas logos use this pattern out of the box.

<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">
    </a>
</div>

Notes:

src is the fallback for browsers that ignore srcset; the 2x entry is picked on retina/HiDPI displays.
Make logo@2x.png exactly twice the pixel dimensions of logo.png, then constrain the display size with CSS or the image's intrinsic width so it renders at 1x size but 2x sharpness.
The same srcset approach works for the dark, sticky and mobile logo variants:

<img class="logo-dark"
     srcset="images/logo-dark.png, images/logo-dark@2x.png 2x"
     src="images/logo-dark@2x.png" alt="Canvas Logo">

Sticky Logo

Canvas can swap the logo image when the header becomes sticky (fixed on scroll). Add an <img class="logo-sticky"> inside #logo; the logo module writes the rules that show it once the header sticks.

<div id="logo">
    <a href="index.html">
        <img class="logo-default" src="images/logo.png" alt="Canvas Logo">
        <img class="logo-sticky"  src="images/logo-sticky.png" alt="Canvas Logo">
    </a>
</div>

How it works:

logo.js detects .logo-sticky and adds: on .sticky-header #logo the default logo is hidden and .logo-sticky is shown.
The sticky-header class is applied to the header wrap automatically when the sticky header engages on scroll.
For a shrinking sticky header, also add <img class="logo-sticky-shrink">; it is shown when the body has sticky-header-shrink.
These variants combine freely with .logo-dark and .logo-mobile in the same #logo element; each is handled by its own generated rule.

Mobile Logo

Canvas can swap the logo image on smaller screens (before the menu expands to desktop). Add a second <img class="logo-mobile"> inside #logo; the logo module injects the CSS that hides the default logo and shows the mobile one whenever the body is not in expanded-menu mode.

<div id="logo">
    <a href="index.html" class="standard-logo">
        <img class="logo-default" src="images/logo.png" alt="Canvas Logo">
        <img class="logo-mobile" src="images/logo-mobile.png" alt="Canvas Mobile Logo">
    </a>
</div>

How it works:

The logo.js module detects .logo-mobile and writes a rule: on body:not(.is-expanded-menu) the standard logo ([class^="logo-"]) is hidden and .logo-mobile is shown.
.is-expanded-menu is added when the viewport is at or above your data-menu-breakpoint (set on <body>, for example data-menu-breakpoint="1200"). Below it, the mobile logo takes over.
You can stack this with .logo-dark, .logo-sticky and .logo-sticky-shrink in the same #logo block; each is handled independently.

Was this page helpful?