BEM. Header & Nav & Mobile toggle btn. Style - 1

BEM Header & Nav - 1

<!-- begin Header
=========================================================================== -->
<header class="header clearfix">
  <!-- begin Header Container -->
  <div class="container header__container clearfix">
    <div class="header__logo">
      <a href="#" class="header__logo-link">
        <img src="http://via.placeholder.com/200x50/4F84DB/FFFFFF?text=LOGO" alt="" class="header__logo-image"> </a>
    </div>
    <div class="header__nav">
      <!-- begin Navigation -->
      <nav class="nav">
        <ul class="nav__items clearfix">
          <li class="nav__item">
            <a class="nav__item-link" href="#">Проекты</a>
          </li>
          <li class="nav__item">
            <a class="nav__item-link" href="#">Новости</a>
          </li>
          <li class="nav__item">
            <a class="nav__item-link" href="#">Контакты</a>
          </li>
          <li class="nav__item">
            <a class="nav__item-link" href="#">О компании</a>
          </li>
        </ul>
      </nav>
      <!-- end Navigation -->
    </div>
    <!-- begin Nav Mobile Toggle -->
    <button type="button" class="nav-mobile-toggle">
      <span class="nav-mobile-toggle__icon-bar"></span>
      <span class="nav-mobile-toggle__icon-bar"></span>
      <span class="nav-mobile-toggle__icon-bar"></span>
    </button>
    <!-- end Nav Mobile Toggle -->
  </div>
  <!-- end Header Container -->
</header>
<!-- end Header
=========================================================================== -->

/* -------------------------------------------------------------------------
   begin Header
 * ------------------------------------------------------------------------- */

.header {
  background-color: #fff;
  position: relative;
  padding: 10px 0;
  .header__logo {
    position: relative;
    float: left;
  }
  .header__nav {
    position: relative;
    float: right;
  }
  .header__logo-link {
    display: block;
  }
  .header__logo-image {
    display: block;
  }
}


/* -------------------------------------------------------------------------
   end Header
 * ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   begin Navigation
 * ------------------------------------------------------------------------- */

.nav {
  position: relative;
  .nav__item {
    float: left;
    margin-right: 65px;
    &:last-child {
      margin-right: 0;
    }
  }
  .nav__item-link {
    display: block;
    font-size: 1rem;
    padding: 13px 0;
    text-align: center;
  }
}


/* -------------------------------------------------------------------------
   end Navigation
 * ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   begin Nav Mobile Toggle
 * ------------------------------------------------------------------------- */

.nav-mobile-toggle {
  border: none;
  background-color: transparent;
  display: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  .nav-mobile-toggle__icon-bar {
    background-color: #4F84DB;
    display: block;
    height: 2px;
    margin: 6px 0;
    width: 25px;
  }
}


/* -------------------------------------------------------------------------
   end Nav Mobile Toggle
 * ------------------------------------------------------------------------- */


/* begin Media Max-Width 767
============================================================================ */

@media screen and (max-width:767px) {
  /* -------------------------------------------------------------------------
   begin Navigation
 * ------------------------------------------------------------------------- */
  .nav {
    display: none;
  }
  /* -------------------------------------------------------------------------
   end Navigation
 * ------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------
   begin Nav Mobile Toggle
 * ------------------------------------------------------------------------- */
  .nav-mobile-toggle {
    display: block;
  }
  /* -------------------------------------------------------------------------
   end Nav Mobile Toggle
 * ------------------------------------------------------------------------- */
}


/* end Media Max-Width 767
============================================================================ */