Как использовать контейнер-центровщик в вёрстке, если иногда контент должен «выпадать» из него?

Question

[lenovoboy]

Как сверстать header чтобы menu при планшетной и мобильной версии тянулось на всю ширину экрана, если в html разметке оно находится внутри контейнера-центровщика?

<header>
  <div class="container">
    <a class="logo">
      <img src="">
    </a>
    <nav>
      <ul></ul>
    </nav>
  </div>
</header>

Answer 1

[xmoonlight]

Добавить ещё один враппер внутрь центровщика для контента, а сам центровщик - растягивать всегда на всю ширину. Таким образом, разделив одну область на 2-е разных с независимым поведением.

Comments

[lenovoboy]

Не понимаю зачем мне добавлять ещё один враппер внутрь центровщика, а сам центровщик всегда растягивать на всю ширину, если у меня это так и работает только header тянется на всю ширину, а container центрует контент - 2-е разные области с независимым поведением. Объясните пожалуйста поподробнее.

[lenovoboy]

На мобильной версии логотип должен находится в рамках центровщика, в то время как пункты меню с его border-bottom, border-top должны тянуться на весь экран, как мне это реализовать, если навигация также лежит в контейнере, а он своими паддингами отталкивает её от краёв экрана?

[xmoonlight]

lenovoboy, я уже объяснил как.

[Froggyweb]

А можно пример в коде. Я тоже универе не понял зачем центровщик на всю ширину

[lenovoboy]

xmoonlight, вы мне предлагаете сделать так?

<header>
  <div class="container">
    <div class="wrap-for-mobile">
      <a class="logo">
        <img src="">
      </a>
    </div>
    <nav>
      <ul></ul>
    </nav>
  </div>
</header>

@media (min-width: desktop) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

@media (min-width: mobile) {
  .container {
    display: flex;
    flex-direction: column;

    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .wrap-for-mobile {
    padding: 0 20px;
  }
}

[xmoonlight]

lenovoboy, ну как-то так, да.
Можно попробовать ещё сделать static и растянуть на всю ширину (left:0; right:0; width:100vw).

[lenovoboy]

xmoonlight, спасибо, теперь ясно ) !

[xmoonlight]

lenovoboy, Поздравляю! )

Answer 2

[ⓒⓢⓢ]

<header>
  <div class="container">
    <a class="logo">
      <img src="">
    </a>
    <button class="close"/>
    <nav>
      <ul></ul>
    </nav>
  </div>
</header>

сбрасываем ширину у всех элементов шапки, тем самым растягиваем на весь экран
.container

display: flex; flex-flow: row wrap; justify-content: space-between;

nav
flex: 100%; text-align: center;

плюс\минус напильником под ваш случай

Comments

[lenovoboy]

Тоже вариант, спасибо )