0

При масштабировании в 360px слетает фон background-color.

.container {
  max-width: 1700px;
  padding: 0 10px;
  margin: 0 auto;
}

header {
  position: absolute;
  width: 100%;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  left: 0;
  top: 0;
  background-color: #3b2f77;
}

.header-container {
  display: flex;
}

.header-links {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 0.9em;
  color: #ffffff;
  text-decoration: none;
  transition: color .2s linear;
}

.logo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}

.nav {
  display: flex;
  list-style: none;
  align-items: center;
}
<header class="header">
  <div class="container header-container">
    <a class="logo"><img src="https://via.placeholder.com/50" alt="Logo" /></a>
    <ul class="nav">
      <li class="nav-item"><a class="header-links" href="">Главная</a></li>
      <li class="nav-item"><a class="header-links" href="">Поиск</a></li>
      <li class="nav-item"><a class="header-links" href="">О нас</a></li>
    </ul>
  </div>
</header>

5
  • Можете подробнее описать проблему? Я пробовал и ничего не слетает. Commented 30 авг. 2021 в 16:31
  • imgur.com/a/xMRfweQ
    – Fgsfd
    Commented 30 авг. 2021 в 16:38
  • 1
    попробуйте добавить position: fixed; в header Commented 30 авг. 2021 в 16:45
  • сработало, но при скролле он так и остается на экране
    – Fgsfd
    Commented 30 авг. 2021 в 16:52
  • Я сделал скрытия header'a через js, спасибо
    – Fgsfd
    Commented 30 авг. 2021 в 17:26

1 ответ 1

1

Попробуйте этот метод

body{
    margin: 0;
}
.container {
    max-width: 1700px;
    padding: 0 10px;
    margin: 0 auto;
}

header {
    background-color: #3b2f77;
    overflow: hidden;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.header-container {
    display: flex;
}

.header-links {
    display: inline-block;
    vertical-align: top;
    position: relative;

    font-size: 0.9em;
    color: #ffffff;
    
    text-decoration: none;
    transition: color .2s linear;
}

.logo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}

.nav {
    display: flex;
    list-style: none;
    align-items: center;
}
<header class="header">
        <div class="container header-container">
           <a class="logo"><img src="./img/logo.png" alt="Logo"></a>
           <ul class="nav">
              <li class="nav-item"><a class="header-links" href="">Главная</a></li>
              <li class="nav-item"><a class="header-links" href="">Поиск</a>
              <li class="nav-item"><a class="header-links" href="">О нас</a>
          </ul>
      </div>
 </header>
 <div style="margin-top: 2000px;"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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