I am making a responsive navigation bar. When i am making it in mobile view with hamburger it is not working. I am using checkbox for this. When someone click the hamburger menu in mobile view the check box will checked and css of the check box with type checked will display it. Code is given below.
<!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">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="./javascript.js"></script>
<title>Pricing Page</title>
</head>
<body>
<!-- Navigation -->
<nav>
<input type="checkbox" id="check">
<div class="logo">
<h3>Spenflo</h3>
</div>
<div class="menus">
<ul class='menu'>
<li> Pricing</li>
<li> About </li>
<li> Blog </li>
<li> Contact </li>
<li class="login"> Login </li>
<li class="get-started"> Get Started </li>
</ul>
</div>
<div class="signup">
<button><a class="login-btn" href="/">Login</a></button>
<button><a class="get_started-btn" href="/">Get Started</a></button>
</div>
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "p22MackinacPro";
src: url(./fonts/P22MackinacPro-BoldItalic_11.otf) format("opentype");
font-style: italic;
}
nav {
position: relative;
font-family: 'Satoshi';
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
nav .logo {
color: #D53987;
margin-left: 20px;
cursor: pointer;
}
nav .menus {
margin-left: 10%;
}
nav .menus ul {
display: flex;
gap: 10px;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
nav .menus ul li {
font-size: 18px;
line-height: 100%;
cursor: pointer;
}
nav .menus ul .login,
.get-started {
display: none;
}
nav .signup a {
text-decoration: none;
color: #000;
}
nav .signup button {
background-color: #000;
font-size: 18px;
width: 180px;
height: 72px;
border: none;
top: 0px;
cursor: pointer;
}
nav .signup button .login-btn {
cursor: pointer;
margin-right: 30px;
}
nav .signup button .get_started-btn {
color: #fff;
cursor: pointer;
}
nav .signup button:first-child {
background-color: white;
width: auto;
height: auto;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media screen and (max-width: 768px) {
.checkbtn {
display: block;
}
nav .menus ul {
position: fixed;
width: 100%;
height: 100vh;
left: 100%;
top: 9%;
background-color: red;
bottom: 15%;
text-align: center;
transition: all .5s;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
}
nav .menus ul .login,
.get-started {
display: block;
}
nav .menus ul li {
width: 90%;
margin: 10px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
nav .signup {
display: none;
}
nav #check:checked~nav .menus ul {
left: 0%;
}
}
I tried everything to do this using only css but nothing is working at all
Related
I am currently having difficulties trying to get a bar I made using hover to appear in the a element bottom instead of the top, do you guys have any suggestions? I am new with CSS and been googling for the better part of 2 hours and cannot find a solution.
Heres the code I am using
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css.css">
<title>Untitled Document</title>
</head>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
<body>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
height: 40px;
padding: inherit;
}
nav li:hover {
background-color: white;
height: 5px;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
padding: 18px 12px;
position: relative;
text-transform: uppercase;
}
Instead of setting the height of nav li, just set the padding of li and add border-bottom color to the hovered element. Also remove the padding of nav li a
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
/* height: 40px; */
padding: 10px 15px;
}
nav li:hover {
border-bottom: 5px solid #fff;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
/* padding: 18px 12px; */
position: relative;
text-transform: uppercase;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
Pretty simple question that I'm struggling to solve via Google. My main issue is that I can't seem to figure out how to resize dropdown menu box's borders horizontally. I tried max-width command in css, but it only does it for one side, and my text isn't centered inside that box.
Here's my project where I'm practicing my html/css/js skills: https://project01-assh.web.app
#charset "UTF-8";
#import "https://fonts.googleapis.com/css?family=Poppins:100,200,400,500,600,700,800|Nunito:300,400,600,700,800";
body {
background-color: #2250fc;
}
li {
list-style-type: none;
}
.dropdown {
text-align: center;
position: absolute;
top: 3%;
left: 90%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 15px;
font-weight: 555;
display: inline-block;
}
#logo {
position: absolute;
top: 1%;
left: 1%;
color: #ffffff;
text-decoration: none;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: 1.5px;
}
a {
color: #ffffff;
text-decoration: none;
}
h1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: .5px;
}
#main_button {
position: relative;
transition: .5s ease;
top: 1%;
left: 90%;
color: #ffffff;
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
}
nav ul li a {
display: block;
padding: 14px 24px;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
left: 10%;
top: 50px;
transform: translateX(-70%);
background-color: #fff;
padding: 10px;
border-radius: 15px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
nav ul li ul li a {
color: black;
font-size: 12px;
font-family: poppins, sans-serif;
font-weight: 555;
padding: 8px 14px;
}
nav ul li ul li a:hover {
color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Project01" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project01</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="logo"> <span class="logo">АСБ</span> </div>
<h1> Автоматические Системы Безопастности</h1>
<div class="dropdown">
<nav>
<p></p>
<ul>
<li>Сервисы
<ul>
<li>Something01</li>
<li>Something02</li>
<li>Something03</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="particles-dots" class="particles"></div>
<script src="plugins/particles/particles.js"></script>
<script src="plugins/particles/particles-dots.js"></script>
</body>
</html>
Dropdown menu is to the right. I'd really appreciate if you can point out bad practices/mistakes in my code so far. I'm trying to learn web development the proper way as a long term career.
Thanks for your time and have a wonderful day!
Sorry for such basic request, I hope it's okay to ask it here.
if you want to resize the nav bar, you need to remove the 200px in li:
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
and use padding or margin if you need more space.
`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
`I am trying to create a dropdown menu for my website,changing z-index is not bringing the dropdown infront of other elements.
The image looks like this
If you want me to include the CSS, ill include.. If there is any quick fix let me know. Z-index and changing position: absolute doesn't work either.
The issue is the overflow:hidden you have in place meaning that dropdown was there but the overflow was hiding it.
I'm assuming the overflow was there as a clearfix? If so, alternative solutions exist.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
Hi there I have a horizontal menu with the logo in the center, can't seem to get it inline but still looks good in all browsers so far.
Now when in responsive mode I would like it to show the logo all the time at the top and the button to go underneath to show/hide the menu.
At the moment in responsive it hides the logo then when the Show Menu is clicked it shows the menu with the logo in the middle of the ul.
Here is the code so far a bit messy at the moment.
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing">   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Also here is the Logo
Coast FM
Thanks
You can add another logo in a div that will be your "hidden logo".
<input id="show-menu" role="button" type="checkbox">
<div class="hidden">
<a class="hidden-logo" href="index.html"></a>
<label for="show-menu" class="show-menu thing">   </label>
</div>
Then you can display it and hide it whenever you wish.
.hidden {
display:flex;
justify-content: center;
background: #424242;
display:none;
}
#media screen and (max-width: 760px) {
.hidden {
display:flex;
}
}
.hidden-logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:23px;
background-size:50%;
width:175px;
display:block;
padding:5px;
}
Here is an example
https://jsfiddle.net/jrdkp7ph/2/
You can use jquery and add desired list dynamically
Do check code here for example: https://jsbin.com/zusunidupo/1/edit?css,js,output
Need to execute below code block every time when window resizes(in link provided executes on first load only)
if ($(window).width() < 760) {
$('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>').insertAfter($('li:eq(4)'))
}
else {
$("#menu").prepend('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>');
}
hey i think your html code many change just suggest improve
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
ul li a.logo { display: none; }
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing"> <a class="logo" href="index.html"></a>   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>