Привет, у меня небольшая проблема с изменением размера:
Веб-сайт: Thelazylife.nl <Рабочий сайт с проблемой </p>
HTML
<body>
<div class="headerContainer">
<div id="nav" class="nav">
<div class="logo">Logo</div>
<span onclick="abc()"><i class="fa fa-bars"></i></span>
<ul id="toggle">
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>Locatie</li>
</ul>
</div>
<div class="box1">
Box 1
</div>
<div class="box2">
Box 2
</div>
<div class="box3">
Box 3
</div>
</div>
</body>
CSS
body{
padding:0;
margin:0;
}
.headerContainer{
height:100vh;
display:grid;
position: relative;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 1fr 1fr;
grid-template-areas:
"navigation navigation"
"box1 box2"
"box3 box3"
;
}
.nav{
grid-area:navigation;
display: flex;
align-items: center;
justify-content: space-around;
background-color: red;
}
.nav ul li:hover{
background-color:orange;
}
.nav ul{
display:flex;
list-style-type: none;
}
.nav ul li {
padding:20px;
background-color: green;
margin-left:20px;
}
i.fa{
display:none;
font-size:22px;
}
.logo{
font-size:22px;
}
.box1{
grid-area:box1;
background:blue;
}
.box2{
grid-area:box2;
background:green;
}
.box3{
grid-area:box3;
background:yellow;
}
@media screen and(max-width: 600px) {
body{
margin:0;
padding:0;
}
.nav ul {
display:none;
position: absolute;
flex-direction:column;
top:25px;
right:0;
width:300px;
}
.nav ul li:hover{
background-color:orange;
}
i.fa{
display:block;
}
}
JS
function abc(){
var x = document.getElementById("toggle");
if(x.style.display == 'block')
x.style.display = 'none';
else
x.style.display = 'block';
}
Только что началось это выглядит некрасиво, но проблема в меню. Действия для воссоздания проблемы: измените размер браузера до 600 пикселей, затем снова измените размер браузера до вида рабочего стола. Меню исчезает тогда. Кроме того, при изменении размера в мобильном представлении, а затем открытии меню и последующем изменении размера браузер сохраняет меню в режиме столбца.
Как я могу решить эту проблему?
С уважением и благодарностью за помощь заранее!