Logo

Shock Theme has useful functions for displaying the logo in different situations, such as at the top of the site, when scrolling down the page sticky header and in responsive mode, visible on mobile. In the footer there is a simple logo block, where there is no toggle function.

Navbar Logo

Note that the <img> tag has different locations for you to type the URL of the respective files:

  • src ━ in which you must type the URL of the main logo;
  • data-logo-alt ━ for the URL of a different logo when the page is scrolled;
  • data-logo-mobile ━ to get a different logo in responsive mode.

    • You can add text in front of the logo image with the logo-after-text element, or if you don't have a logo image, remove everything and just keep the site-title element which by default is commented out as example.

    <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 Theme" class="logo"
/>
<span class="logo-after-text">SHOCK</span>
</a>