HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Menu</title>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Menu</title>
<link rel="stylesheet" type="text/css" href="styleh.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<div class="container_header">
</head>
<body>
<header>
<div class="container_header">
<div class="container_responsive">
<div id="logo">
<h1>Wango.</h1>
</div>
<div id="logo">
<h1>Wango.</h1>
</div>
<label for="toggle">☰</label>
</div>
</div>
<input type="checkbox" id="toggle"/>
<nav>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#" class="button">Subscribe</a></li>
</ul>
</nav>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#" class="button">Subscribe</a></li>
</ul>
</nav>
</div>
</header>
</header>
CSS
/****************************
Main
****************************/
body {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #65747e;
}
font-size: 14px;
color: #65747e;
}
.container {
width: 86.11%;
margin: auto;
overflow: hidden;
height: 530px;
}
width: 86.11%;
margin: auto;
overflow: hidden;
height: 530px;
}
.container_text {
padding-top: 118px;
}
padding-top: 118px;
}
h1 {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
text-decoration: none;
}
.button {
padding: 15px 25px;
border-radius: 30px;
padding: 15px 25px;
border-radius: 30px;
font-weight: 400;
text-align: center;
cursor: pointer;
}
text-align: center;
cursor: pointer;
}
/****************************
Header
****************************/
.container_header {
width: 86.11%;
margin: auto;
/*position: absolute;*/
}
header {
width: 100%;
height: 80px;
line-height: 80px;
width: 100%;
height: 80px;
line-height: 80px;
background: #ffffff;
}
}
header a {
color: #65747e;
}
color: #65747e;
}
header ul {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding-left: 30px;
}
float: left;
display: inline;
padding-left: 30px;
}
header #logo {
float: left;
cursor: pointer;
float: left;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: #000000;
font-weight: 700;
color: #000000;
}
header nav {
float: right;
}
float: right;
}
nav .button {
font-weight: 500;
border: 2px solid #2b9dff;
color: #2b9dff;
}
font-weight: 500;
border: 2px solid #2b9dff;
color: #2b9dff;
}
nav .button:hover {
background-color: #2b9dff;
color: #ffffff;
background-color: #2b9dff;
color: #ffffff;
transition-duration: 0.3s;
}
}
label {
margin: 0 auto;
font-size: 25px;
line-height: 80px;
display: none;
width: 25px;
float: right;
}
margin: 0 auto;
font-size: 25px;
line-height: 80px;
display: none;
width: 25px;
float: right;
}
#toggle {
display: none;
}
display: none;
}
/****************************
Responsive
****************************/
@media only screen and (max-width: 1000px) {
.container_header {
width: 100%;
margin: auto;
position: absolute;
}
width: 100%;
margin: auto;
position: absolute;
}
.container_responsive {
margin-left: 20px;
margin-right: 20px;
}
margin-left: 20px;
margin-right: 20px;
}
label {
display: block;
cursor: pointer;
}
display: block;
cursor: pointer;
}
header li {
position: relative;
float: initial;
display: block;
padding-left: 0;
background-color: #ffffff;
}
nav {
text-align: center;
width: 100%;
display: none;
}
text-align: center;
width: 100%;
display: none;
}
#toggle:checked + nav {
display: block;
}
}
