Search code examples
htmlcssflexboxmenucss-grid

CSS Resizing issue menu

Hi there I have a slight resizing issue:

Website: Thelazylife.nl < Working Site with the problem

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

Just started it looks ugly but the problem is with the menu. Steps to recreate the problem: Resize the browser to less than 600 pixels, then resize the browser to desktop view again. The menu dissapears then. Also when resized to mobile view and then opening the menu and then resizing the browser keeps the menu in column mode.

How can I fix this problem?

Kind regards and thanks for the help in advance!

Solution

  • as per your question, you need to disable the navigation bar coming as a single column on devices having less than 600px. The approach you took is that you're update the same menu bar for desktop and mobile and for that you need to use onresize event to keep checking the size of the window. Read more here

    Other way is that you can simply create two navigation menus, one for desktop and one for mobile and simply use CSS media queries to display one as per window size. That will solve your purpose easily.