Как разместить бургер-меню и навигацию (nav) в одном блоке с header, чтобы они были на одной линии?

Question

Как разместить бургер-меню на панели навигации сайта, чтобы оно было в одном блоке с header?

.nav-list {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: 50px;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 0px 50px;
  list-style: none;
  background-color: #808080;
}

.nav-item {
  display: grid;
  margin: 0px;
  padding: 0px 20px;
}

.nav-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-size: 20px;
  font-weight: 300;
  margin: 0px;
  padding: 0px;
  color: #080808;
  overflow: hidden;
}

.burger {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: flex-end;
  width: 30px;
  height: 18px;
  float: right;
}

.burger span {
  height: 2px;
  width: 100%;
  transform: scale(1);
  background-color: red;
}

.burger::before,
.burger::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: red;
  transition: all 0.3s ease 0s;
}

.burger::before {
  top: 0;
}

.burger::after {
  bottom: 0;
}

<div class="header-container">
  <div class="burger">
    <span></span>
  </div>
  <nav class="nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
      <li class="nav-item"><a href="#aboutMe" class="nav-link">About Me</a></li>
      <li class="nav-item"><a href="#skills" class="nav-link">>Skills</a></li>
      <li class="nav-item"><a href="#codeExample" class="nav-link">Code Example</a></li>
      <li class="nav-item"><a href="#courses" class="nav-link">Courses</a></li>
      <li class="nav-item"><a href="#experience" class="nav-link">Experience</a></li>
      <li class="nav-item"><a href="#english" class="nav-link">English</a></li>
    </ul>
  </nav>
</div>

Answer 1

Я предлагаю поместить всё содержимое в контейнер .header, который будет занимать всю ширину экрана и иметь фон background-color: #808080;. Внутри создадим блок .header-container, в котором разместим бургер и меню навигации. Этот блок оформим с помощью flex, чтобы выровнять элементы по центру .align-items и равномерно распределить их по сторонам.

Дополнительно добавим адаптивную верстку для небольших экранов — чтобы при уменьшении ширины оставался только бургер-меню.

Вот пример кода:

.header {
  width: 100%;
  background-color: #808080;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  height: 60px;
}

.burger {
  display: flex;
  position: relative;
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.burger span,
.burger::before,
.burger::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background-color: red;
  transition: 0.3s;
}

.burger::before {
  transform: translateY(-6px);
}

.burger::after {
  transform: translateY(6px);
}

.nav {
  flex-grow: 1;
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  color: #080808;
}

/* --- адаптив для маленьких экранов --- */
@media (max-width: 768px) {
  .nav-list {
    display: none;
    /* прячем меню */
  }

  .burger.active+.nav .nav-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    background: #808080;
    width: 100%;
    text-align: center;
  }
}

<header class="header">
  <div class="header-container">
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
        <li class="nav-item"><a href="#aboutMe" class="nav-link">About Me</a></li>
        <li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
        <li class="nav-item"><a href="#codeExample" class="nav-link">Code Example</a></li>
        <li class="nav-item"><a href="#courses" class="nav-link">Courses</a></li>
        <li class="nav-item"><a href="#experience" class="nav-link">Experience</a></li>
        <li class="nav-item"><a href="#english" class="nav-link">English</a></li>
      </ul>
    </nav>

    <div class="burger">
      <span></span>
    </div>
  </div>
</header>

вот результат

БЛОГ НА HUSL

Как разместить бургер-меню и навигацию (nav) в одном блоке с header, чтобы они были на одной линии?

Ответы (1 шт):