Issues with mobile nav

Question

I'm trying to make the desktop nav hidden on mobile, but for some reason it doesn't hide until i increase the max-width to 1000px+, which shouldn't happen because all the phones I've tested on are only 400-500px wide. I can only assume it's something else in my code causing this but not sure what to change to fix it.

body {
    margin: 0;
}

ul {
    list-style: none;
}

.rnav {
    background-color: rgb(40, 40, 44);
    height: 60px;
}

.darkbg {
    background-color: rgb(55, 55, 59);
}

a {
    text-decoration: none;
}

.navbtn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.navbtn:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

.logo {
    width: 250px;
    max-width: 300px;
    margin-left: 20px;
    transition: all ease .3s;
}

.locn {
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    float: left;
}

.logo:hover {
    transform: scale(1.05);
}

.logreg {
    margin-right: 10px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.logbtn {
    background-color: rgb(8, 98, 182);
    color: #fff;
    padding: 10px 22px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 0 0 rgb(3, 66, 124);
    transition: all .3s;
    cursor: pointer;
}

.regbtn {
    background-color: rgb(14, 138, 209);
    color: #fff;
    padding: 10px 24px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 0 0 rgb(6, 96, 148);
    transition: all .3s;
    cursor: pointer;
}

.logbtn:focus,.regbtn:focus {
    outline: none;
}

.logbtn:active,.regbtn:active {
    box-shadow: none;
    transform: translateY(3px);
}

.navlist {
    float: left;
}

.mnav {
    display: block;
    position: absolute;
    right: 25px;
    top: 10px;
    z-index: 100;
}

@media screen and (min-width: 800px) {
    .mnav {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .rnav #myLinks {
        display: none;
      }
    .logreg {
        display: none;
    }
}

<html>
    <head>
        

<link href="css/style.css" rel="stylesheet">
<link href="css/icon.css" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet">

    </head>

<body class="darkbg">

<nav class="rnav">
      
<a href="#" class="locn">
    <img src="https://cdn.discordapp.com/attachments/833803478618996756/834522746548387888/Rocrates_logo.png" class="logo">
</a>

<ul class="navlist" id="myLinks">
    <li class="navbtn2">
        <a>Crates</a>
    </li>
    <li class="navbtn">
        <a>Coinflip</a>
    </li>
</ul>

<div class="logreg">
<button class="logbtn"><i class="fas fa-user-friends"></i> Login</button>

<a href="/register">
    <button class="regbtn"><i class="fas fa-user-plus"></i> Register</button>
</a>
</div>

<div id="nav-icon3" class="mnav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

    </nav>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Can you please edit your question and paste the code in a [stack snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) so that we can test it on mobile? — biberman, Apr 22 '21 at 20:37
Sorry, i can't reproduce the error since it works as expected on my phone. Maybe it has something to do with something like a special interpretation of pixels on mobile devices... — biberman, Apr 22 '21 at 20:52

score 0 · Accepted Answer · answered Apr 22 '21 at 20:51

Add this line of code into the head of your document:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Your browser is essentially creating a smaller 'zoomed out' image of your page rather than ACTUALLY resizing it. See here.

Issues with mobile nav

1 Answers1