position fixed для IE
Когда ширина экрана становится меньше 767 меню превращается в бургер и вот на IE это выглядит иначе. Пропадает выравнивание элементов с помощью flex, грешу на меню которое спозиционировано с помощью fixed(становится fixed на чекпоинте), думаю, что на IE меню попрежнему занимает свое место, из-за чего выравнивание происходит с его учетом. Если меню закомментить все будет ок. Как это исправить?
Как выглядит меню до бургера и после

<div class="header_body">
<a href="#">
<h1>ze<span>bra</span></h1>
</a>
<div class="wrap-align">
<nav class="header_menu">
<ul class="header_list">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Shopping</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<div class="price">
<a href="#">
<img src="img/Shape1.png" alt="">
</a>
<span>$35.00</span>
<span>▼</span>
</div>
<div class="header_burger">
<span></span>
</div>
</div>
</div>
//css
.header_body {
position: relative;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
height: 86px;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
> a {
text-decoration: none;
color: $colorWord_header;
position: relative;
z-index: 5;
display: inline-block;
margin-right: 40px;
}
a > h1 {
font-size: 38px;
font-family: "HelveticaNeueCyr-Bold";
text-transform: uppercase;
}
a > h1 > span {
color: $logo_color;
}
}
.wrap-align {
width: 650px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_burger {
display: none;
}
.header_menu {
// margin-right: 118px;
}
.header_list {
display: flex;
position: relative;
z-index: 2;
li {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: $colorWord_header;
font-size: 18px;
font-family: "HelveticaNeueCyr-Regular";
padding: 34px 15px;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: $bgc_head;
}
}
}
.price {
position: relative;
z-index: 5;
a {
text-decoration: none;
}
img {
vertical-align: baseline;
}
a + span {
font-size: 24px;
font-family: "HelveticaNeueCyr-Regular";
color: rgb(157, 157, 157);
margin: 0 10px;
}
span + span {
font-size: 18px;
color: rgb(157, 157, 157);
vertical-align: super;
cursor: pointer;
}
}
чекпоинт на 767
.header {
.header_burger {
display: block;
position: relative;
width: 30px;
height: 20px;
position: relative;
z-index: 3;
}
.header_burger:before,
.header_burger:after {
content: "";
position: absolute;
background-color: black;
width: 100%;
height: 2px;
left: 0;
transition: all 0.3s;
}
.header_burger:before {
top: 0;
}
.header_burger:after {
bottom: 0;
}
.header_burger span {
position: absolute;
top: 9px;
left: 0;
background-color: black;
width: 100%;
height: 2px;
transition: all 0.3s;
}
.header_burger.active span {
transform: scale(0);
}
.header_burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header_burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header_menu {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.941);
padding: 130px 0 0 0;
transition: all 0.4s;
z-index: 1;
}
.wrap-align {
width: 300px;
}
.header_menu.active {
top: 0;
}
.header_list {
margin: 0 0 0 20px;
display: block;
li {
// margin: 10px 0;
}
a {
padding: 10px 20px;
}
}
.price {
margin-right: -30%;
}
}
