Problemi chiusura menù laterale

[nicolato]

Ciao a tutti, volevo chiedere un aiuto su una cosa molto banale ma che mi sta facendo uscire pazzo.

Allora, sto creando un menù laterale e voglio che quando clicco su menù scompaia la scritta menù e compaia il menù con una x per chiuderlo. Ho fatto tutto ma l'unico problema è che la x di chiusura mi rimane anche quando il menu non è aperto (come vedete nella foto che ho postato).



Qualcuno riesce ad aiutarmi con il javascript per far si che scompaia la x quando il menù non è aperto?

vi posto il codice...

Questo è il menù

<div class="container">
  <div class="overlay"></div>
  <header>
    <div class="navBtn"><span style="font-size:17px,margin-top:1px;">≡</span> MENU</div>
    <nav> 
	<a href="index.html">Home</a> 
	<a href="#About">About</a> 
	<a href="#Service">Service</a> 
	<a href="#contact">Contact</a> 
	</nav>
	<div class="close"></div>
  </header>
  </div>

Questo è lo script che credo mi crei l'errore

<script>
$(document).ready(function () {	

  var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
  };

	//Nav
	$('.navBtn').click(function() {
    toggleMenu();
	});

	$('.close').click(function () {
    toggleMenu();
	});

  
});

</script>

Infine questo è il css

.close {
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 30px;
}

.close:before {
    content: "X";
    font-size: 15px;
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
	overflow-y:visible;
}
.close:hover {
    color: #ff3e3e;
	text-decoration:none;
}

nav {
  padding: 80px 0 0 20px;
  overflow: hidden;
  position: absolute;
  transition: .3s ease-out;
  top: 0px;
  left: 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  background: #fff;
  
}

nav  img{
  width:70px;
  position:absolute;
  top:250px;
  left:66px;
  
}

nav a {
  float: left;
  padding: 8px 0 0 0px;
  opacity: 0.5;
  width: 100%;
  margin-left:-22px!important;
  transition: .3s ease;
  font-family: georgia, serif;
  text-align: center;
}

nav a:hover,
.current,
.toggle 
.navBtn { display:none; }


.toggle nav {
  padding-left: -120px!important;
  opacity: 1;
}

.navBtn {
  font-size:14px;
  font-weight:bold;
  margin: 30px 0 0 0px;
  width: 100%;
  text-align: center;
  -webkit-transform: rotate(0deg);
  transition: .3s ease-out;
  display: block;
  cursor: pointer;
  position: absolute;
  z-index: 99999999!important;
  opacity: 0.5;
  left: 0;
  font-family: arial, sans-serif;
}

.toggle .navBtn {
  color: #333;
  left: -41.5px;
}

.navBtn:hover { opacity: 1; }

.block { display: block; }

Vi ringrazio anticipatamente....

 

[criric]

Ciao, puoi aggiungere questo nel css

display: none;

in questo modo quando apri la pagina sarà nascosto
e aggiungere alla funzione toggleMenu

$('.close').toggle();

 

[nicolato]

Grazie mille per il consiglio ma non ho ancora risolto del tutto, probabilmente perchè sto sbagliando qualcosa.

allora questo l'ho modif

$(document).ready(function () {	

  var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
  };

	//Nav
	$('.navBtn').click(function() {
    toggleMenu();
	});
	
	$('.close').toggle();

	$('.close').click(function () {
    toggleMenu();
	});

  
});

mentre il css in questo modo

.close {
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 30px;
	display: none;
}

.close:before {
    content: "X";
    font-size: 15px;
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
	overflow-y:visible;
	display: none;
}
.close:hover {
    color: #ff3e3e;
	text-decoration:none;
}

tuttavia è sparita la x ma anche nel menù!La posso cliccare ma non si vede!
mi basterebbe che la x si vedesse e poi sarei apposto...

 

[criric]

$('.close').toggle(); devi metterlo nella funzione toggleMenu

var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
          $('.close').toggle();
  };

edit
e display: none; devi metterlo solo nella classe .close {

 

[nicolato]

Perfetto ora funziona tutto benissimo...Sei un grande!Ti ringrazio infinitamente!!

 

[criric]

Non mi ero accorto che i tuoi messaggi non erano visibili; ho appena sistemato.
Dai un occhiata qui.