Menu-Media queries

Witam mam problem z menu dostosowywanym pod urządzenie mobilne przez media Media Queries(pojawia się na urządzeniach o szerokości 320px-530px). Problem w tym, że jak rozwinę menu to pojawia się ono pod innym tekstem próbowałem poprawić z ,,z-index" ale się nie udało. Proszę o pomoc jak to zrobic.

Code Pen: https://codepen.io/przemek-dybalski/pen/jObxgaE

Lub:

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
	<title>Gospodarstwo ogrodnicze</title>
	
	<meta name="description" content="Gospodarstwo ogrodnicze Tomasz Dybalski" />
	
	<meta name="keywords" content="kwiaty, ogród żarnów, żarnów, gmina żarnów, targ żarnów, " />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	
	<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
	<link href="css/fontello.css" rel="stylesheet" type="text/css" />
	
	<link type="image/x-icon" rel="Shortcut icon" href="favicon.ico" />
	
		<script src="skrypty/jquery-1.11.3.min.js"></script>
	<script>
	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	</script>
	
	
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="skrypty/jquery.bpopup.min.js"></script>
	<script>
	$( document ).ready(function() {
		$('#popup_this').bPopup();
	});
	</script>
	<link href="style.css" rel="stylesheet" type="text/css"/>
	
</head>

<body>
<!--        <div id="popup_this" style="left: 374px; position: absolute; top: 755px; z-index: 9999; opacity: 1;">
		<span class="button b-close">
			<span>X</span>
		</span>
            <a style="color: red; font-weight: bold">Uwaga!!!</a><br><a style="color: black; font-weight: bold">Od dnia 10.05.2020r. do 17.05.2020r. na naszej stronie zamawówienia online będą niedostępne.<br>Za utrudnienia przepraszamy.</a>
	   </div>-->
	
	<div class="wrapper">
		<div class="header">
		
			<div class="logo">
				<img src="images/ros.png" style="float: left;"/>
				<span style="color: #00cc00">Godpodarstwo</span> ogrodnicze
				<div style="clear:both;"></div>
			</div>
		</div>
		    <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a>Strona główna</a>
            <a href="cennik">Cennik</a>
            <a href="aktualności">Aktualności</a>
            <a href="kontakt">Kontakt</a>
			<a href="o-nas">O nas</a>
        </div>
    </div>
		
		<div class="content">
		<div id="text">
		
		<div class="tytul">
		<a style="color: #00cc00">Gospodarstwo</a> <a>&nbspogrodnicze</a>
		</div>
		
		<div class="tresc">
		<a>Nasza firma znajduje się w ... na ulicy .... Na naszym gospodarstwie można zakupić kwiaty oraz sadzonki warzyw.</a>
		</div>
		<br>
		<center><img src="images/pokaz.png" style="margin-right: 20px" class="obrazek"></center>
		</div>
		</div>
		
		
		<div class="stopka">
		<a style="font-size: 15px; font-weight: bold">Kontakt &nbsp|&nbsp 123@123.pl &nbsp|&nbsp Gospodarstwo ogrodnicze, .... .. ... ...</a>
		</div>
		

	</div>
	
</body>
</html>

CSS:

body {
  	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
    margin: 0;
}

#popup_this {
	z-index: 5;
	top: 50%;
	left: 50%;
	text-align:center;
	background: #fff;
	padding: 15px;
	position: fixed;
	height: auto;
    position: relative;
}
.b-close {
	color: #fff;
	background: #ff0000;
	padding: 5px 10px;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.wrapper
{
	width: 100%;
}

.header
{
	width:100%;
	padding: 40px 0;
}

.logo
{
	width: 990px;
	font-size: 45px;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
}

.nav {
    text-align: center;
    height: 70px;
    line-height: 70px;
    background-color: #00cc00;
}

.pds{
	width:1000px;
	margin:auto;
	position:relative;
	}
	
	
.content
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}

.tytul {
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 2em;
	font-weight: bold;
}

.tresc {
	font-size: 1em;
	font-weight: bold;
}

.zamow {
    background-color: #00cc00;
    border: 1px solid #006600;
    -moz-box-shadow: 2px 2px 3px #006600;
    -webkit-box-shadow: 2px 2px 3px #006600;
    box-shadow: 2px 2px 3px #006600;
    text-decoration: none;
    color: white;
    font-size: 25px;
    padding: 3px 10px;
}

.zamow:hover {
	background-color: #00b300;
	transition: all .5s
}

.zamow:active {
    -moz-box-shadow: 2px 2px 3px #006600 inset;
    -webkit-box-shadow: 2px 2px 3px #006600 inset;
    box-shadow: 2px 2px 3px #006600 inset;
}

.formularz {
	box-shadow: 0 0 20px 0 #000000;
	margin: 50px auto;
	width: 350px;
	text-align: center;
	background: #d9d9d9;
}

.formularz h2 {
	background: #00cc00;
	margin-top: 0;
	padding: 10px;
}

.formularz input {
	display: block;
	width: 90%;
	margin: 10px auto;
	padding: 10px;
}

.formularz ilosc {
	display: block;
	width: 50%;
	margin: 10px auto;
	padding: 10px;
}

.formularz textarea {
	width: 50%;
}

.stopka
{
	width: 100%;
	text-align: center;
	background-color: #222222;
	position: absolute;
	top: 1000px;
}

#text{
    visibility: hidden;
    animation-name: pojawianie;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes pojawianie {
    from {opacity:0;} to {opacity:1;visibility: visible;}
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 4;
}

.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color: white;
    margin: 0 10px;
    line-height: 70px;
	padding: 10px;
}

.menu a:hover {
	background-color: #00b300; /* menu góra */
	border-radius: 10px;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    background-color: #00cc00;
}
#toggle {
    display: none;
}



@media only screen and (min-width: 320px) and (max-width: 530px) {
    .logo {
        width: 560px;
        font-size: 35px;
    }
    .logo img {
        height: 50px;
        width: 65px;
    }
    .nav {
        width: 155%;
    }
    .stopka {
        width: 155%;
        top: 1000px;
    }
    .tytul {
        font-size: 1.3em;
    }
    .tresc {
        font-size: 0.8em;
    }
    .content {
        width: 143%;
        margin-left: 20px;
    }

    .wrapper {
        width: 100%;
    }
        label {
        display: block;
        cursor: pointer;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
        z-index: 3;
    }
    .menu a {
        display: block;
        border-bottom: 1px solid #00cc00;
        margin: 0;
        z-index: 3;
     
    }
    #toggle:checked + .menu {
        display: block;
    }
}

@media only screen and (min-width: 530px) and (max-width: 799px) {
    .logo {
        margin-left: 200px;
    }
    .nav {
        width: 275%;
        padding: 20px 0;
    }
    .stopka {
        width: 275%;
        top: 2435px;
    }
    .tytul {
        font-size: 4em;
    }
    .tresc {
        font-size: 3em;
    }
    .content {
        width: 1900px;
        margin-left: 50px;
    }
}