# Uploading Logo

The template supports the dual version of the logotype to maintain a good contrast ratio depending on the conditions where it appears:

  • Primary logo version is used for the places with light backgrounds.
  • Secondary logo version is used for the places with dark backgrounds.

# Markup

# Graphic Version

For the best appearance it's recommended to use .svg format for the logo. Also feel free to any other image format appropriate for the web, e.g. .jpg, .png, .gif

<a class="logo" href="index.html">
  <div class="logo__wrapper-img">
    <!-- primary logo version (for light backgrounds)-->
    <img class="logo__img-primary" src="img/general/logo/kinsey-dark.svg" alt="Kinsey HTML5 Template" width="52" height="19"/>
    <!-- secondary logo version (for dark backgrounds)-->
    <img class="logo__img-secondary" src="img/general/logo/kinsey-light.svg" alt="Kinsey HTML5 Template" width="52" height="19"/>
  </div>
</a>

# Text Version

Don't have your own brand logo yet? No worries – just use text logo version. It supports title and tagline which you can use it to shortly describe yourself or your company.

<a class="logo" href="index.html">
  <div class="logo__text">
    <span class="logo__text-title">Kinsey</span>
    <span class="logo__text-tagline">Creative Agency</span>
  </div>
</a>

# Appearance in Header

Since the header supports sticky effect with changable background on scrolling, you may define which logo version to appear in the normal header state data-arts-header-logo="secondary" and when the header becomes sticky data-arts-header-sticky-logo="primary"

<header
  class="header header_fixed container-fluid js-header-sticky"
  id="page-header"
  data-arts-theme-text="dark"
  data-arts-header-sticky-theme="bg-light-1"
  data-arts-header-logo="primary"
  data-arts-header-sticky-logo="primary"
  data-arts-header-sticky-theme-text="dark"
  data-arts-header-overlay-theme-text="light"
  >
  ...
</header>

For the footer use data-arts-footer-logo="primary" attribute as follows:

<footer
  class="footer container-fluid" 
  id="page-footer" 
  data-arts-theme-text="dark" 
  data-arts-footer-logo="primary"
  data-arts-fixed-reveal="data-arts-fixed-reveal"
  data-arts-fixed-reveal-from="-20vh"
  data-arts-fixed-reveal-from-opacity="0"
  >
  ...
</footer>

TIP

The dark & light appearance rules may differ from page to page depending on the visual conditions where the logo appear. For example, you may want to appear the light version of your logo on the dark pages to maintain good contrast ratio.

For the best results make sure to check all the pages header & footer and adjust logo appearance rules as you need.