Как поместить увеличенный логотип поверх навигатора?

Спасибо за помощь. Я только начинаю изучать HTML и CSS. Я уже неделю бьюсь над проблемой слишком большого логотипа. Как мне поместить логотип поверх навигатора, как выглядит слой?

мой html-файл:

<nav class = "navigation-bar">
    <link rel="stylesheet" href="{% static 'financeapp/style1.css' %}">

    <img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
            alt="company logo" height = 150px width = 150px>

<div class = "navigation-container">
    <ul>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> About </a></li>
        <li><a href="#"> Contact </a></li>
        <li><a href="#"> Join Us </a></li>
    </ul>
</div>

мой css файл: 

.navigation-bar {
display:flex;
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}

.logo {
    float: left;
}

.navigation-container {
    display: flex;
    justify-content: space-betwee;
    width: 100%; /*left side*/

}
.navigation-container ul {
    margin: 0;
    padding: 0;
    width: 100%; /*right side*/
    height: 70px;
    background-color: yellow;
}

.navigation-container li {
    display: inline;
}

.navigation-container a {
    padding: 10px;
    text-decoration: none;
}

enter image description here

Спасибо за ваше время.

Сначала вам нужно поместить изображение внутрь вашего списка List

<div class = "navigation-container">
    <ul>
        <li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
            alt="company logo" height = 150px width = 150px style="background-color: black;"></li>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> About </a></li>
        <li><a href="#"> Contact </a></li>
        <li><a href="#"> Join Us </a></li>
    </ul>
</div>

Тогда вы можете поставить margin-top в вашем списке, чтобы он опустился вниз, чтобы картинка правильно вписалась позже

  .navigation-container {
      display: flex;
      justify-content: space-betwee;
      width: 100%; /*left side*/
      margin-top: 5rem;
  
  }

Тогда вы можете установить ваш .logo на margin-top: -43px; как пример, и логотип будет двигаться вверх.

Вам нужно будет поиграть с числами, чтобы сделать так, чтобы вам нравился внешний вид.

Также важно отметить, что все это не является отзывчивым и, скорее всего, не будет хорошо выглядеть в дальнейшем. Вы всегда должны начинать разрабатывать дизайн для мобильных устройств.

Вернуться на верх