Page Headers

Header at the top of all Cinch website pages. To test the sticky header, position your cursor over the left column and scroll down.

Page Headers Sample(s):

Default Sticky Header

<header class="m_site-header">
  <div class="m_site-header-wrap container">
    <div class="m_site-header-flex">
      <div class="m_site-header-menu-toggle">
        <button aria-label="open nav menu" id="menu-open" class="mobile-only">
          <svg class="menu" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-menu"></use>
          </svg>
        </button>
        Menu
      </div>
      <a href="/" class="m_site-header-logo-link" aria-label="Return to home page">
        <svg class="m_site-header-logo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logos-logo-color"></use>
        </svg>
      </a>
      <div class="m_site-header-actions">
        <nav class="m_site-header-nav">
          <ul>
            <li class="active">
              <a href="#">Insurance</a>
            </li>
            <li>
              <a href="#">FAQ</a>
            </li>
            <li>
              <a href="#">Resources</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
            <li class="sign-in view-logged-out-only">
              <a href="#">Sign In</a>
            </li>
            <li class="sign-out view-logged-in-only">
              <a href="#">Sign Out</a>
            </li>
            <li class="get-a-quote">
              <a href="#">Get A Quote</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

Alt Header

<header class="m_site-header">
  <div class="m_site-header-wrap container">
    <div class="m_site-header-flex">
      <div class="m_site-header-menu-toggle">
        <button aria-label="open nav menu" id="menu-open" class="mobile-only">
          <svg class="menu" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-menu"></use>
          </svg>
        </button>
        Menu
      </div>
      <a href="/" class="m_site-header-logo-link" aria-label="Return to home page">
        <svg class="m_site-header-logo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logos-logo-color"></use>
        </svg>
      </a>
      <div class="m_site-header-actions items-center">
                <div class="items-center">
                    <p class="m-0 text-xs">
                        Need Help?
                        <a href="tel:8332423794" class="block font-semibold no-underline text-base">833-242-3794</a>
                    </p>
                </div>
                <div class="items-center ml-5">
                    <div class="btn btn-secondary cursor-pointer">Sign In</div>
                </div>
      </div>
    </div>
  </div>
</header>

Alt Header

<header class="m_site-header landing">
  <div class="m_site-header-wrap container">
    <div class="m_site-header-flex">
      <a href="/" class="m_site-header-logo-link" aria-label="Return to home page">
        <svg class="m_site-header-logo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logos-logo-color"></use>
        </svg>
      </a>
      <div class="m_site-header-actions sm:flex">
        <div class="items-center sm:hidden md:flex">
            <p class="m-0 text-xs">
                Need Help?
                <a href="tel:8332423794" class="block font-semibold no-underline text-base">833-242-3794</a>
            </p>
        </div>
        <nav class="m_site-header-nav">
          <ul>
            <li class="get-a-quote">
              <a href="#">Get A Quote</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>