Моя навигационная панель перекрывается с моим lo go, когда я уменьшаю размер моего браузера

Question

В основном, когда я пытаюсь уменьшить размер моего браузера, он начинает перекрываться с моим элементом lo go с левой стороны, в результате чего параметры навигации становятся скрытыми.

Это HTML для моего заголовка + nav:

<header>
        <nav>
            <a href="index.html"><img src="bitbird.png" class="logo"></a>
            <ul class="navlist">
                <li class="navitem"><a href="about.html" class="navlink" id="navlink1">Om Bitbird</a></li>

                <li class="navitem"><a href="artists.html" class="navlink" id="navlink2">Artister</a></li>

                <li class="navitem"><a href="contact.html" class="navlink" id="navlink3">Kontakt</a></li>

                <li class="navitem"><a href="topsongs.html" class="navlink" id="navlink4">Topplåtar</a></li>
            </ul>

        </nav>
    </header>

Это CSS для моего navbar

.navlist {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 100%;
    width: 50%;
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
}
.navitem {
    height: 100%;
    padding: 0;
    margin-bottom: auto;

}

.navlink {
    display: flex;
    text-decoration: none;
    color: black;
    align-items: center;
    padding: 1rem;

}

Кстати, отображение заголовка настроено на изгиб.

Answer 1

у вас есть проблема семанти c в HTML. Ваш lo go не должен быть внутри тега nav.thats причина, по которой он перекрывается. должно быть примерно так:

<header> 
 <a href="#">
   <img src="#">
 </a>
 <nav>
   <ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
  </ul>
 </nav>
</header>

Кроме того, я рекомендую вам использовать BEM для лучшей организации ваших классов и в CSS style * использовать для создания глобальных стилей. Наконец, используйте Flexbox или CSS Grid для всего, вместо использования float. Это лучше для отзывчивости.

Вот код с лучшим решением:

*,
*::before,
*::after{
  margin:0;
  padding:0;
  list-style: none;
  text-decoration:none;
}

html{
  font-size:100%;
}

body{
  box-sizing:border-box;
}

.header{
  background-color:red;
  display:flex;
  justify-content:space-between;
}

.header__nav{
  background-color:yellow;
}

.header__nav-list{
  display:flex;
}

.header__nav-item{
  margin: 0 .5rem 0 2rem;
}

<header class="header">
  <a href="#"><img src="#" class="header__logo"></a>
        <nav class="header__nav">
          <ul class="header__nav-list">
                <li class="header__nav-item"><a href="about.html" class="header__nav-link" id="navlink1">Om Bitbird</a></li>

                <li class="header__nav-item"><a href="artists.html" class="header__nav-link" id="navlink2">Artister</a></li>

                <li class="header__nav-item"><a href="contact.html" class="header__nav-link" id="navlink3">Kontakt</a></li>

                <li class="header__nav-item"><a href="topsongs.html" class="header__nav-link" id="navlink4">Topplåtar</a></li>
            </ul>

        </nav>
    </header>

Here it is the snippet of the code. 

У меня было несколько цветов фона, чтобы вы могли лучше визуализировать. Вы можете стереть позже. Не стесняйтесь использовать этот код для вас. Надеюсь, я тебе помог. Любые вопросы, которые вы задали, я с удовольствием вам помогу.