Answer the question
In order to leave comments, you need to log in
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;
}
Answer the question
In order to leave comments, you need to log in
<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 questionAsk a Question
731 491 924 answers to any question