Как сделать navbar fixed?

Question

[Skrolea]

Добрый день. Запутался с флексбокс (ну или не с ним). Надо сделать navbar фиксированным, но при position:fixed - блок смещается влево, а хочется, чтобы он был по центру и в контейнере. Что не так и почему?

Пример в CodePen

<div class="grid__container grid__header">
            <div class="grid__logo--header">
                <h3>Site.<span>com</span></h3>
            </div>
            <div class="grid__menu">
                <div class="menu__button" id="menu_button">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

.grid__header {
    position:fixed;
    min-height: 164px;
    height: 164px;
    width:100%;
    display: -webkit-flex;
    display: flex;
    background: transparent;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    justify-content: space-between;
}
.grid__container {
    max-width: 960px;
    margin: 0 auto;
}
.grid__body {     
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

Пример в CodePen

Answer 1

[Дмитрий]

<div class="grid__header">
  <div class="grid__container">
    <div class="grid__logo--header">
      <h3>Site.<span>com</span></h3>
    </div>
    <div class="grid__menu">
      <div class="menu__button" id="menu_button">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</div>

.grid__header {
  position: fixed;
  min-height: 164px;
  height: 164px;
  width: 100%;
}
.grid__header .grid__container {
  display: -webkit-flex;
  display: flex;
  background: transparent;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;  /* Safari 6.1+ */
  justify-content: space-between;
}

Comments

[Skrolea]

Э-э-э, если мы разделяем header и container в разные блоки, то почему в стилях они вместе?

[Дмитрий]

потому что для родителя необходимо задать display: flex; - родитель .grid__container. Можно добавить новый класс - .grid__container--header