1

Есть вот такой код navbar. Вот что должно получиться на выходе navbar

Не понимаю как это сделать, выровнял всё по центру, отступ от логотипа 150px влево и вправо. Меню будет адаптивным, не думаю что через absolute будет правильное решение... Может кто-то подсказать как лучше выполнить данный код, чтобы соответствовало скрину ? Буду признателен ;)

.container {
  width: 1170px;
  margin: 0 auto;
}

.navbar {}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.nav-menu__item {
  display: flex;
  margin: 0px 15px;
}

.nav-menu__item a {
  text-decoration: none;
  color: #555555;
}

.nav-menu__item .active {
  text-decoration: none;
  color: #5363db;
}

.nav-menu__item_center {
  display: block;
  margin: 0px 135px;
}

.nav-menu__item.logo {
  position: absolute;
  top: 0;
}
<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-menu__item"><a href="#" class="active">About us</a></li>
      <li class="nav-menu__item"><a href="#">Gallery</a></li>
      <li class="nav-menu__item"><a href="#">Reservation</a></li>
      <li class="nav-menu__item logo"><img src="//www.anyway.website/d/logo.png" alt="YOGA" class="logo"></li>
      <li class="nav-menu__item"><a href="#" class="nav-menu__item_center">YOGA</a></li>
      <li class="nav-menu__item"><a href="#">Blog</a></li>
      <li class="nav-menu__item"><a href="#">Elements</a></li>
      <li class="nav-menu__item"><a href="#">Shop</a></li>
    </ul>
  </div>
</nav>

5
  • Очень подозреваю, что YOGA должно быть частью картинки. Или у вас есть такой шрифт?
    – andreymal
    19 дек 2018 в 13:34
  • @andreymal шрифт такой "ChampagneLimousinesBold"
    – ccxdec
    19 дек 2018 в 13:35
  • Если логотип является единственным местом, где этот шрифт используется, я бы всё равно сделал картинкой
    – andreymal
    19 дек 2018 в 13:35
  • А вообще как-то странно, что на вашей картинке логотип не выровнен по горизонтали. Точно нужно именно так? i.stack.imgur.com/6ey7f.png
    – andreymal
    19 дек 2018 в 13:40
  • @andreymal то я криво скриншот шапки сделал, прошу прощения :c
    – ccxdec
    19 дек 2018 в 13:42

1 ответ 1

2

.container {
  width: 1170px;
  margin: 0 auto;
}

.navbar {}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  padding: 0;
}

.nav-menu__item {
  display: flex;
  margin: 0px 15px;
}

.nav-menu__item a {
  text-decoration: none;
  color: #555555;
}

.nav-menu__item .active {
  text-decoration: none;
  color: #5363db;
}

.nav-menu__item_center {
  display: block;
}

.logo {
  padding: 0 150px;
  margin: 0;
  text-align: center;
}

.logo__link {
  display: inline-block;
}

.logo__image {
  display: block;
}
<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-menu__item"><a href="#" class="active">About us</a></li>
      <li class="nav-menu__item"><a href="#">Gallery</a></li>
      <li class="nav-menu__item"><a href="#">Reservation</a></li>
      <li class="nav-menu__item logo">
        <a href="#" class="logo__link">
          <img class="logo__image" src="//www.anyway.website/d/logo.png"
          alt="YOGA" class="logo">
          YOGA
        </a>
      </li>
      <li class="nav-menu__item"><a href="#">Blog</a></li>
      <li class="nav-menu__item"><a href="#">Elements</a></li>
      <li class="nav-menu__item"><a href="#">Shop</a></li>
    </ul>
  </div>
  </nav

4
  • Вы задали ссылке inline-block, а логотипу - block, это и всё ?)
    – ccxdec
    19 дек 2018 в 13:44
  • @ANYWAYCODE нет, здесь ещё картинка и YOGA завёрнуты в один общий li
    – andreymal
    19 дек 2018 в 13:46
  • @ANYWAYCODE, поместил все в один li, обнулил у него margin и убрал у ul padding.
    – E_K
    19 дек 2018 в 13:46
  • @E_K, благодарствую, вопрос решен ;)
    – ccxdec
    19 дек 2018 в 13:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.