Basic Navbar

<header class="header-nav simple-nav">
  <a href="" class="header-logo-link">
    <img class="header-logo-img" src="/assets/jurassic-park-logo.png" alt="jurassic-park-logo" />
    <p class="header-logo-name">Raptor UI</p>
  </a>
  <div class="header-nav-links">
    <nav>
      <ul>
        <li><a href="#" class="header-link">link 1</a></li>
        <li><a href="#" class="header-link">link 2</a></li>
        <li><a href="#" class="header-link">link 3</a></li>
      </ul>
    </nav>
  </div>
</header>
    

Navbar with a search

<header class="header-nav nav-search">
  <a href="" class="header-logo-link">
    <img class="header-logo-img" src="/assets/jurassic-park-logo.png" alt="jurassic-park-logo" />
    <p class="header-logo-name">Raptor UI</p>
  </a>

  <div class="std-search">
    <input type="text" placeholder="Search..." class="input standard nav-searchbar" />
    <button class="btn btn-brand btn-accent search-btn nav-searchbar-btn">
      <span class="material-icons nav-search-icon"> search </span>
    </button>
  </div>

  <div class="header-nav-links">
    <nav>
      <ul>
        <li><a href="#" class="header-link">link 1</a></li>
        <li><a href="#" class="header-link">link 2</a></li>
        <li><a href="#" class="header-link">link 3</a></li>
      </ul>
    </nav>
  </div>
</header>
    

Navbar with a menu

<header class="header-nav nav-search nav-menu">
  <button class="btn nav-menu-btn">
    <span class="material-icons nav-menu-icon"> menu </span>
  </button>
  <a href="" class="header-logo-link">
    <img class="header-logo-img header-menu" src="/assets/jurassic-park-logo.png" alt="jurassic-park-logo" />
    <p class="header-logo-name">Raptor UI</p>
  </a>

  <div class="header-nav-links">
    <nav>
      <ul>
        <li><a href="#" class="header-link">link 1</a></li>
        <li><a href="#" class="header-link">link 2</a></li>
        <li><a href="#" class="header-link">link 3</a></li>
      </ul>
    </nav>
  </div>
</header>
    

Navbar with a menu and search

<header class="header-nav nav-search nav-menu">
  <button class="btn nav-menu-btn">
    <span class="material-icons nav-menu-icon"> menu </span>
  </button>
  <a href="" class="header-logo-link">
    <img class="header-logo-img header-menu" src="/assets/jurassic-park-logo.png" alt="jurassic-park-logo" />
    <p class="header-logo-name">Raptor UI</p>
  </a>

  <div class="std-search">
    <input type="text" placeholder="Search..." class="input standard nav-searchbar" />
    <button class="btn btn-brand btn-accent search-btn nav-searchbar-btn">
      <span class="material-icons nav-search-icon"> search </span>
    </button>
  </div>

  <div class="header-nav-links">
    <nav>
      <ul>
        <li><a href="#" class="header-link">link 1</a></li>
        <li><a href="#" class="header-link">link 2</a></li>
        <li><a href="#" class="header-link">link 3</a></li>
      </ul>
    </nav>
  </div>
</header>