Atomic BEM Header Example

header.html

<!-- Header Bar -->
<header class="e-header">

  <!-- Header Top -->
  <div class="e-header__top">

    <!-- Logo -->
    <a href="index.html" class="e-header__logo">
      <img src="img/logo.svg" alt="companyLogo">
    </a>
    <!-- /Logo -->

    <!-- Meta Navigation -->
    <div class="e-header__tools">
      <div class="e-btn-group">
        <a href="" class="e-btn e-btn--ghost">Anmelden</a>
        <a href="" class="e-btn e-btn--primary">Regsitrieren</a>
      </div>
    </div>
    <!-- /Meta Navigation -->

    <!-- Search -->
    <div class="e-header__search e-search">
      <input type="search" placeholder="Suchbegriff..." class="e-search__input">
      <button type="submit" class="e-search__submit">Suchen</button>
    </div>
    <!-- /Search -->

  </div>
  <!-- /Header Top -->

  <!-- Main Navigation -->
  <nav class="e-nav">
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Über uns</a></li>
      <li><a href="#">Leistungen</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
  <!-- /Main Navigation -->

</header>
<!-- /Header Bar -->