S
S
Skrolea2016-06-27 21:19:26
css
Skrolea, 2016-06-27 21:19:26

How to make navbar fixed?

Good afternoon. Confused with flexbox (well, or not with it). We need to make the navbar fixed, but with position:fixed - the block is shifted to the left, but I want it to be centered and in the container. What is wrong and why?
Example in 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;
}

Example in CodePen

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2016-06-27
@soledar10

<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;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question