Simple Header – CSS Snippet

Go back

<!-- Vidyamath header component | Source: https://vidyamath.com -->
  <header class="vidyamath-header" data-vidyamath-header>
    <div class="vidyamath-header-shell">
      <a class="vidyamath-brand" href="#" aria-label="Vidyamath home">
        <span class="vidyamath-brand-mark" aria-hidden="true">V</span>
        <span>vidyamath</span>
      </a>

      <nav class="vidyamath-nav" id="vidyamath-nav" aria-label="Primary navigation">
        <a class="vidyamath-nav-link vidyamath-active" href="#">Overview</a>
        <a class="vidyamath-nav-link" href="#">Features</a>
        <a class="vidyamath-nav-link" href="#">Stories</a>
        <a class="vidyamath-nav-link" href="#">Pricing</a>
      </nav>

      <div class="vidyamath-header-actions">
        <a class="vidyamath-login-link" href="#">Log in</a>
        <a class="vidyamath-button vidyamath-button-dark" href="#">Get started <span aria-hidden="true">&#8599;</span></a>
      </div>

      <button class="vidyamath-menu-toggle" type="button" aria-expanded="false" aria-controls="vidyamath-nav" aria-label="Open menu">
        <span></span>
        <span></span>
      </button>
    </div>

    <div class="vidyamath-menu-overlay" data-vidyamath-overlay></div>
  </header>