I little help with the menu

[Razeft]

I wrote this code as an exercise and I use the mobile first system, in fact with the mobile version no problem at the moment, but with the menu I found a problem when I had to switch to the tablet, you can not see, can you help me?

https://codepen.io/Razeft_it/full/mpVjMj/
css

* {
  margin: 0;
  padding: 0;
}

body {
  background: #DAB;
}

.container {
  width: 100%;
  max-width: 1500px;
  background: white;
  height: 100vh;
}

.row:after {
  display: block;
  clear: both;
  content: '';
}

.row+.row {
  margin-top: 0;
}

[class^="col-"] {
  float: left;
  margin-right: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
}

[class^="col-"]:last-child {
  margin-right: 0%;
}


/*
.col-1  { width:5.583333333333333%; }
.col-2  { width:14.16666666666667%; }
.col-3  { width:22.75%; }
.col-4  { width:31.33333333333333%; }
.col-5  { width:39.91666666666667%; }
.col-6  { width:48.5%; }
.col-7  { width:57.08333333333333%; }
.col-8  { width:65.66666666666666%; }
.col-9  { width:74.25%; }
.col-10 { width:82.83333333333333%; }
.col-11 { width:91.41666666666666%; }
.col-12 { width:100%; }
*/

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

.nav {
  height: 3.3rem;
  background-color: black;
  color: white;
}

.articolo {
  height: auto;
  background-color: blue;
  color: white;
}

.logo {
  float: left;
  border-right: none;
  height: 3.3rem;
  display: inline-block;
  padding-left: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 3.3rem;
  height: 3.3rem;
  color: white;
  font-size: 2rem;
  font-family: 'Lobster', sans-serif;
}

.logo:hover {
  transition: all .2s linear;
  color: #800080;
  font-size: 2.5rem;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: right;
  position: fixed;
  top: -500px;
  width: 100vw;
  transition: all .3s ease;
  z-index: 0;
  opacity: 0;
  background: black;
}

.menu li {
  float: none;
  font-size: 1rem;
  font-family: 'Oswald', sans-serif;
}

.menu a {
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease;
  padding: 0 20px 0 20px;
  line-height: 3.3rem;
  height: 3.3rem;
  color: white;
  text-decoration: none;
  display: block;
  border-top: 1px solid #800080;
  border-right: none;
}

.menu a:hover {
  color: #800080;
}

.menu a:active,
.menu a:focus {
  background: black;
  color: #800080;
}

.menu .mobile-menu-checkbox {
  display: none;
}

.menu .mobile-menu-checkbox:checked~ul {
  top: 3.3rem;
  opacity: 100;
}

.menu .mobile-menu-toggle {
  display: block;
  height: 3.3rem;
  position: fixed;
  top: 0;
  right: 0;
  font-size: 2rem;
  line-height: 3.3rem;
  padding: 0 20px;
  cursor: pointer;
  transition: all .3s ease;
  color: white;
}

.menu .mobile-menu-toggle:hover {
  color: #800080;
}

@media screen and (min-width: 700px) {
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
    float: right;
    height: 3.3rem;
  }
  .menu ul li {
    float: right;
    font-size: 0.7rem;
    border-right: 1px solid #800080;
    position: relative;
    top: 500px;
    height: 3.3rem;
    z-index: 1;
    opacity: 1;
  }
  .menu a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease;
    padding: 0 20px 0 20px;
    line-height: 3.3rem;
    height: 3.3rem;
    color: white;
    text-decoration: none;
  }
  .menu a:hover {
    color: #800080;
  }
  .menu a:active,
  .menu a:focus {
    color: #800080;
  }
  .menu .mobile-menu-checkbox {
    display: none;
  }
  .menu .mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    font-size: 2rem;
    line-height: 3.3rem;
    padding: 0 20px;
    cursor: pointer;
    transition: all .3s ease;
    color: white;
  }
  .menu .mobile-menu-toggle:hover {
    color: #800080;
  }
}`

html

<head>
  <title>Container - Row - Col</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
  <div class="container">
    <header>
      <div class="row nav">
        <div class="col-12  menu">
          <p class="logo">AG</p>

          <input type="checkbox" id="mobile-menu-checkbox" class="mobile-menu-checkbox">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portafolio</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Social</a></li>

          </ul>
          <label class="mobile-menu-toggle" for="mobile-menu-checkbox">&#x2630;</i></label></div>
      </div>
    </header>

    <section>
      <div class="row articolo">
        <div class="col-12">prova</div>
      </div>
    </section </div>
</body>

[dahis39]

With tablets, which your screen width would be pretty much larger than 700px, rules in the media query overrode the previous. Let’s focus on the media query part. You can find two display: none; in there. Remove them. You can see your burger menu now, but the list is still not showing up when clicked. Well, that’s the top: 500px; in your .menu ul li. Change it to top: 0;, so your list is no longer hidden behind the main container.

The trick is open up your dev tool. See what css rules are applied on your elements. Tinker them around. Walk up the dom tree if necessary.

[Razeft]

to explain better, the menu width: 700px should become like in the image, so obviously the symbol to open the mobile menu must be hidden;)

thansk for answer