<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;
}
.sub-menu - top: 100%; + padding-top: 10px
(используйте нужное значение)position: fixed
- по своему действию это значение близко к absolute
, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.position: fixed
для .menu
ul > li - position: relative;
position: absolute; top: 100%; left: 0;
img
это строчный элемент, и поэтому к нему применяется свойство vertical-align. В большинстве браузерах это свойство по умолчанию - baseline
.