CSS Resizing issue menu

Question

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!

Welcome to SO, to help you with code, you need to share the code what you have achieved, without that none of them able to help you and no code will also lead to closure of question. — Manjuboyz, Apr 26 '20 at 16:43

score 1 · Accepted Answer · answered Apr 26 '20 at 20:21

1

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.

answered Apr 26 '20 at 20:21

Akansh

1,715
3
15
34

Thank you for the answer! I will try the onresize event for sure, else i will go for the dubble navigation, which is for me probably the better option for now! – Seantf Apr 26 '20 at 21:34
@Seantf yeah, infact it is better option in terms of website performance. – Akansh Apr 27 '20 at 12:57

score 0 · Answer 2 · answered Apr 26 '20 at 17:49

0

Instead of JS code you can simply use the hover property of element for your desired screen size.

As per your need simply remove your JS code and add the following line of css:

span:hover + ul {
    display: flex;
}

answered Apr 26 '20 at 17:49

Lalu Prajapati

11
2

Hey Thank you for the suggeston, the only problem is than that i lose the on click effect for mobile phones, since hovering isnt a option on there. – Seantf Apr 26 '20 at 18:25

CSS Resizing issue menu

2 Answers2