Why are my menu items not showing when desktop size? - css

Question

I followed this tutorial to create a responsive hamburger menu. But i can't figure out why the menu items don't show when my screen is desktop size.
When the screen is mobile size i can click the hamburger menu and the items appear. If i scale up my screen to desktop size while the menu is "open" they do appear the way i want to (because of my media querie). But when i refresh the page (while my screen is desktop size) my menu items don't appear. I can't seem to figure it out, please help if you see my mistake. Thanks!
This is what i want:
This is what i get now:
This is what i get when i scale to mobile screen:
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
#media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>

Answer 1

You need to remove the max-height: 0;and max-height:250px set a height: auto;on the menu in the media query for the menu to show up in desktop.
Update I've revised the snippet, it works now.
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
#media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>