When the screen size is 320px, I want to hide the menu. Currently, the menu is always hidden and I need to call it.
It should be visible by default, but when the screen size is 320px, #main-nav needs to be called.
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
// Additional text
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
<a href="#details">Details</a>
<a href="#adresses">Adresses</a>
<a href="#kontakt">Kontakt</a>
</nav>
<div class="page-wrap">
<header class="main-header">
<a href="#main-nav" class="open-menu"> ☰</a>
<a href="#close-menu" class="close-menu">close</a>
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>