Как подвинуть один элемент навигации?

Question

[Владислав]

как сдвинуть логотип вниз
пытаюсь сдвинуть,но двигается вниз вся навигация
html code

<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-menu__item"><a href="#">Продукция</a></li>
      <li class="nav-menu__item"><a href="#">О нас</a></li>
      <li class="nav-menu__item logo">
            <a href="#" class="logo__link">
                <img class="logo__image" src="/img/b9053d873e9f69058997913e0fffca2e.png" alt="YOGA" class="logo">
            </a>
      </li>
      <li class="nav-menu__item"><a href="#">Вакансии</a></li>
      <li class="nav-menu__item"><a href="#">Контакты</a></li>
    </ul>
  </div>
</nav>

css code

.container {
    width: 1920px;
    height: 138px;
    margin: 0 auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
    
}
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-menu__item {
    display: flex;
    margin: auto 50px auto auto;
}
.nav-menu__item a {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-decoration: none;
    color: #000;
} 
.nav-menu__item_center {
    display: block;
}
.logo {
    text-align: center;
}
.logo__link {
    display: inline-block;
}
.logo__image {
    display: block;
    width: 140px;
    height: 140px;
}

.nav-menu__item.logo::before {
    content:" ";
    width: 10em;
    height: 5em;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position:absolute;
    top:138px;
    margin-left:-10px;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
    z-index: -1;
}

Comments

[FeST1VaL]

не понимаю проблемы вашей, вы же можете на ссылку вешать стили. Задаете .logo размеры блока (чтобы пункты меню не сьехали на место логотипа если через absolute) и сдвигаете ссылку .logo__link, а лучше сделайте песочницу на codepen, возможно пока ее делаете сами поймете

Answer 1

[artkep]

Немного поменял ваш css

.container {
    width: 1920px;
    height: 138px;
    margin: 0 auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 2;
    
}
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-menu__item {
    display: flex;
    margin: 45px 50px;
}
.nav-menu__item a {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    text-decoration: none;
    color: #000;
} 
.nav-menu__item_center {
    display: block;
}
.logo {
    text-align: center;
  width:180px;
  hidth:180px;
}
.logo__link {
    display: inline-block;
  position:absolute;
  top:60px;
  z-index: 1;
}
.logo__image {
    display: block;
    width: 140px;
    height: 140px;
}

.nav-menu__item.logo::before {
    content:" ";
    width: 10em;
    height: 5em;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position:absolute;
    top:138px;
    margin-left:-10px;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
    z-index: -1;
}

надеюсь поможет