Logo

Shock supports different logo variants for different states of the navbar — the default logo at the top of the page, an alternate logo for the sticky header once the visitor scrolls, and a mobile variant for responsive mode. All three are controlled from a single img tag inside the navbar.

The navbar logo markup

inside <nav>

<a class="navbar-brand" href="/">
<!-- <div class="site-title">Site Title</div> -->
<img
  src="assets/images/logo-white.svg"
  data-logo-alt="assets/images/logo-white.svg"
  data-logo-mobile="assets/images/logo-white.svg"
  alt="Shock Template" class="logo"
/>
<span class="logo-after-text">SHOCK</span>
</a>

What each attribute does

Attribute	Purpose
src	The main logo, shown at the top of the page.
data-logo-alt	An alternate logo shown once the page is scrolled (sticky header).
data-logo-mobile	A logo variant shown in responsive / mobile mode.

You can also add wording beside the logo with logo-after-text, or drop the image entirely and use a text-only site-title element instead.

Keep all three attributes

If your logo looks the same in every state, just point all three attributes at the same URL. Removing data-logo-alt or data-logo-mobile from the img tag will cause console errors.

Continue to TypographyFonts and the built-in text style classes.