HTML slide in navbar wrong position-CodePudding

I have a problem. I am trying to create a responsive navbar with a dropdown in it. When I open the navbar using the hamburger menu on mobile, I want the menu to slide in from the left side and let the menu use the entire screen except the navbar itself. I now have the following code:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(src/assets/images/background2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color:#464646;
}

nav {
    background-color: #547430;
    height: 70px;
}

.nav:after{
    content: '';
    clear: both;
    display: table;
}

.nav-links a {
    color: #fff;
}

nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: 600;
    line-height: 70px;
    padding-left: 60px;
    padding-right: 120px;
}

nav ul{
    margin-right: 40px;
    list-style: none;
    position: relative;
}

.menu {
    gap: 1em;
    font-size: 18px;
    z-index: 9;
}

nav ul{
    margin-right: 40px;
    list-style: none;
    position: relative;
}

.float-right {
    float: right;
}

nav ul li{
    display: inline-block;
    background: #547430;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    line-height: 70px;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 15px;
}

nav ul li a:hover{
    color: white;
    border-radius: 5px;
    background-color: #6d8f4c;
}

nav ul ul li a:hover{
    box-shadow: none;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 3px solid white;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}

nav ul ul ul{
    border-top: none;
}

nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
    position: relative;
    margin: 0px;
    width: 150px;
    float: none;
    display: list-item;
    border-bottom: 1px solid #547430;
}

nav ul ul li a{
    line-height: 50px;
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    left: 150px;
}

.show,.icon,input{
    display: none;
}

.fa-user-circle {
    padding-right: 10px;
    font-size: 18px;
}


@media (max-width: 1000px) {

    .menu {
        display: block;
        position: absolute;
        background-color: blue;
        margin-top: 70px;
        text-align: left;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        left: -100%;
    }

    .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
    }

    nav ul li,nav ul ul li{
        display: block;
        width: 100%;
        margin: 0px;
    }

    nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    nav ul ul a{
        padding-left: 40px;
    }

    .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover{
        color: white;
    }
    .show   a, nav ul ul{
        display: none;
    }

    [id^=btn]:checked   ul{
        display: block;
    }

    input[type=checkbox]:checked~.menu {
        left: 0%;
    }

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>

<nav class="navbar">
  <div class="logo">Audio Diary</div>
  <ul class="nav-links">
      <label for="btn" class="icon">
          <span class="fa fa-bars"></span>
      </label>
      <input type="checkbox" id="btn">

      <div class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/">Explore</a></li>
        <li><a href="/">Info</a></li>
        <li class="float-right">
            <!--<a href="/login">Login</a>-->
            <label for="btn-1" class="show">Account <i class="fas fa-caret-down"></i></label>
            <a href="#"><i class="fas fa-user-circle"></i>Account</a>
            <input type="checkbox" id="btn-1">
            <ul>
                <li><a href="#">Recordings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </div>
  </ul>
</nav>

</body>
</html>

As you can see, the menu isn't full height, while I use height: 100%; in the .menu of the media query. Also, menu isn't using the full width, because I can see a little space on the right side. How can I get the menu to use full screen height and width if slided in?

CodePudding user response：

You can remove position: relative from the nav ul ruleset (which is duplicated in your code snippet). This will allow your absolute positioned menu to be absolutely positioned to the window instead of to that element. Since that element had relative position when you make the height 100% for .menu it's 100% of that element which had 0 height, so your menu was 0 height as well.

I also made the height calc(100% - 70px) to account for the top margin so your menu doesn't automatically overflow the screen vertically.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(src/assets/images/background2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color:#464646;
}

nav {
    background-color: #547430;
    height: 70px;
}

.nav:after{
    content: '';
    clear: both;
    display: table;
}

.nav-links a {
    color: #fff;
}

nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: 600;
    line-height: 70px;
    padding-left: 60px;
    padding-right: 120px;
}

nav ul{
    margin-right: 40px;
    list-style: none;
}

.menu {
    gap: 1em;
    font-size: 18px;
    z-index: 9;
}

.float-right {
    float: right;
}

nav ul li{
    display: inline-block;
    background: #547430;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    line-height: 70px;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 15px;
}

nav ul li a:hover{
    color: white;
    border-radius: 5px;
    background-color: #6d8f4c;
}

nav ul ul li a:hover{
    box-shadow: none;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 3px solid white;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}

nav ul ul ul{
    border-top: none;
}

nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
    position: relative;
    margin: 0px;
    width: 150px;
    float: none;
    display: list-item;
    border-bottom: 1px solid #547430;
}

nav ul ul li a{
    line-height: 50px;
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    left: 150px;
}

.show,.icon,input{
    display: none;
}

.fa-user-circle {
    padding-right: 10px;
    font-size: 18px;
}


@media (max-width: 1000px) {

    .menu {
        display: block;
        position: absolute;
        background-color: blue;
        text-align: left;
        margin-top: 70px;
        height: calc(100% - 70px);
        width: 100%;
        transition: all 0.3s ease;
        left: -100%;
    }

    .icon{
        display: block;
        color: white;
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 70px;
        cursor: pointer;
        font-size: 25px;
    }

    nav ul li,nav ul ul li{
        display: block;
        width: 100%;
        margin: 0px;
    }

    nav ul ul{
        top: 70px;
        border-top: 0px;
        float: none;
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    nav ul ul a{
        padding-left: 40px;
    }

    .show{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover{
        color: white;
    }
    .show   a, nav ul ul{
        display: none;
    }

    [id^=btn]:checked   ul{
        display: block;
    }

    input[type=checkbox]:checked~.menu {
        left: 0%;
    }

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>

<nav class="navbar">
  <div class="logo">Audio Diary</div>
  <ul class="nav-links">
      <label for="btn" class="icon">
          <span class="fa fa-bars"></span>
      </label>
      <input type="checkbox" id="btn">

      <div class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/">Explore</a></li>
        <li><a href="/">Info</a></li>
        <li class="float-right">
            <!--<a href="/login">Login</a>-->
            <label for="btn-1" class="show">Account <i class="fas fa-caret-down"></i></label>
            <a href="#"><i class="fas fa-user-circle"></i>Account</a>
            <input type="checkbox" id="btn-1">
            <ul>
                <li><a href="#">Recordings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </div>
  </ul>
</nav>

</body>
</html>