I'm realizing an hamburger menu (the menu in the code is a local file and in the snippet you won't see it) and it work great. I'm using the :checked
pseudoclass and the checkbox input
element to simulate the click.
My problem is that when I shrink from the big media query (bigger screens) towards to little media query (little screens) my vertical menu is automatically closed instead it shouldn't appear at all. How could I fix it?
body {
margin: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
line-height: 1.3;
font-size: 1.05em;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
footer,
header,
nav {
font-family: Tahoma, Geneva, sans-serif;
}
/*#region HEADER*/
.main-header {
background-color: #f38630;
}
.main-header .inner,
main .main-footer .inner {
margin: 0 20px;
padding: 20px;
color: #fff;
}
.main-header .inner a {
font-size: 0.8em;
font-weight: 400;
color: #fff;
display: block;
}
nav.pageBody input {
display: none;
}
nav.pageBody ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: 0.5s;
transition-timing-function: ease-in-out;
}
nav.pageBody ul li a,
nav.pageBody label {
display: block;
color: white;
cursor: pointer;
background-color: #69d2e7;
text-decoration: none;
padding: 0.5em;
font-size: 1.1em;
text-align: center;
border-bottom: 1px solid white;
}
nav.pageBody ul li a:hover {
background-color: #17ccf0;
}
nav.pageBody input:checked ~ ul {
max-height: 100em;
}
nav.pageBody input:checked + label::before {
content: "Chiudi Menu";
}
nav.pageBody label {
background-image: url("menu.png");
background-repeat: no-repeat;
background-position: left 0.5em top 50%;
cursor: pointer;
text-align: right;
border-right: none;
}
nav.pageBody label::before {
content: "Apri Menu";
}
nav.pageBody ul li:last-of-type a {
border-right: none;
}
/*#endregion NAVBAR*/
.pageBody {
max-width: 1200px;
margin: 1.2em auto;
/* background-color: red;
border:1px solid black;*/
}
@media only screen and (min-width: 768px) {
body {
line-height: 1.4;
font-size: 1.2em;
}
nav.pageBody label {
display: none;
}
nav.pageBody ul {
max-height: 100em;
}
nav.pageBody ul li {
float: left;
width: 20%;
}
nav.pageBody ul li a {
border-bottom: none;
border-right: 1px solid white;
}
nav.pageBody ul li:last-of-type a {
border-right: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="layoutMobileFirst_barraMenuElastica.css" />
</head>
<body>
<header class="main-header">
<div class="inner">
<h2>Header <a href="javascript:(void(0))">Indietro</a></h2>
</div>
</header>
<nav class="pageBody">
<input type="checkbox" id="hamburger-element" />
<label for="hamburger-element"></label>
<ul class="clearfix">
<!-- <li><a href="#">Menu</a></li> -->
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Corsi</a></li>
<li><a href="#">Open Day</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
</body>
</html>
The problem is this rule in the 768px media query, this cause the transaction.
nav.pageBody ul { max-height: 100em; }
Then, to display the navbar and in the meanwhile avoid the transiction in the opposite direction my solution is to change the aboge rule in the big media query like that:
nav.pageBody ul { max-height: unset; }