This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
Is there any chance that someone has a solution for this problem, If you look at my Codepen link there will be a text "Johnny" that I want to hide behind the dark grey div. Is there by any chance a simple solution for this? Thanks!
Codepen
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny Porty</title>
<!-- LINKED CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- LINKED FONT -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<h1>NOICE</h1>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact <span class="arrow arrow-bottom"></span></li>
</ul>
</nav>
<div class="first_div">
<h1> JOHNNY </h1>
</div>
<div class="second_div">
<h1> STONEY </h1>
</div>
<!-- LINK SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
Explicitly define position: relative on .first_div AND .second_div
and then
Set z-index:10 on nav
window.onscroll = function() {scrollNav()};
var navbar = document.getElementById("navbar");
function scrollNav() {
if (window.pageYOffset >= 1) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index:10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
position: relative;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 3;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
z-index: 4;
position: relative;
}
.second_div h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny Porty</title>
<!-- LINKED CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- LINKED FONT -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<h1>NOICE</h1>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact <span class="arrow arrow-bottom"></span></li>
</ul>
</nav>
<div class="first_div">
<h1> JOHNNY </h1>
</div>
<div class="second_div">
<h1> STONEY </h1>
</div>
<!-- LINK SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
z-index won't work without explicit positioning. Set position: relative on .first_div and .second_div to make your current code work as expected.
im not sure about whether its what you wanted, but you can try to replace you css code with
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index: 10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 2;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
position: absolute;
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
width: 100%;
z-index: 4;
}
.second_div h1{
margin: 0;
}
Related
I was wondering how I could center the picture and keep the height of the div.
I want to move "the picture" down but it did not work... it also moved my webpage name down a bit too.
Here is my current code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
It is just for large screens right know.
I would aprecciate any help :)
You can add that code to align the image and logo text in the center of div element!
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
Also, you can change the max-width about the distance of the logo image and the logo text.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
And without flex box, you can add vertical-align:center to the div holding the logotype (both image and brand name) and give the image some top padding, as follows:
<div id="logoAndText" style="text-align: center;"></div>
<div class="logo" style="padding-top:2vh;"></div>
<!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="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText" style="text-align: center;">
<div class="logo" style="padding-top:2vh;">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
I tried to make a menu on the side of JavaScript. I wanted to handle this problem with jQuery toggle, but it did not happen. Is it because the position is relative?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
div{
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
right: 226px;
}
i{
margin-left: 200px;
display: inline-block;
font-size: 24px;
position: relative;
bottom: 201px;
background-color: white;
color: red;
right: 46px;
transition: all 1s ease ease-in-out;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
</style>
<script>
$(document).ready(function(){
$("i").click(function(){
$("#div1").toggle(500)
})
})
</script>
</head>
<body>
<i class="fas fa-bars"></i>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
</body>
</html>
Yes, it has to do with position: relative. I will explain what is going on:
Your body starts at the top of the viewport and is just as high as the highest of its children pushes it to be, so it stretches downwards to fits its children, but not more. Before toggling, #div1 is the highest child. After toggling, #div1 is hidden, so only the <i></i> remains, and the body will have a very low height.
Now when an element has position: relative, one thing that happens is that you can use top, left, right and bottom on it to move it relative to where it normally would be. Your <i></i> does have position: relative, and it also has bottom: 201px, so it gets moved up 201px. Normally, it would be at the top of the viewport, inside the body. When being moved up that far, it ends up outside of the viewport, so you can't see it anymore.
You can see all this visually for yourself using your Browser's developer tools, for example Page Inspector for Firefox or Chrome's DevTools.
I've changed a bit in your css, but mainly I've moved the i after the div. Check it out and see if this is what you need.
Demo
$(document).ready(function() {
$("i").click(function() {
$("#div1").toggle(500)
})
})
* {
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
display: block;
}
ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr {
float: left;
width: 100px;
}
div {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
float:left;
}
i {
top: 0px;
display: inline-block;
font-size: 24px;
position: relative;
margin-left:5px;
background-color: white;
color: red;
transition: all 1s ease ease-in-out;
}
ul li a:hover {
background-color: rgb(0, 108, 250);
}
i:hover {
color: rgb(0, 108, 250);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars"></i>
This is your snippet with some changes:
removed position:relative from CSS, the positioning is now flex-based (with margin)
tweaked transition a bit and added some styles to make button movement smoother (check out a fix for transition property and --menu_off modifier class)
$(document).ready(function(){
$(".js-menu-toggle-button").click(function(){
$(this).toggleClass('menu-container__toggle-button--menu_off');
$(".js-menu-bar").toggle(500);
})
})
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
.menu-container {
display: flex;
}
.menu-container__menu-bar {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
}
.menu-container__toggle-button {
margin-left: 2rem;
font-size: 24px;
background-color: white;
color: red;
transition: all 0.5s ease-in-out;
}
.menu-container__toggle-button--menu_off {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="menu-container">
<div class="menu-container__menu-bar js-menu-bar">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
</div>
</body>
</html>
I am currently studying front - end web development and I am at the stage where I am building projects for my portfolio.
I am currently working on a TO DO list website, I have coded most of the functionality however I am struggling with the CSS aspect.
If you can give a newbie developer some feedback on the code below I would really appreciate it.
So what I am asking for today;
I want to position an icon over the border of the text just like this:
I want to achieve this
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<h1>Your todo list</h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
<script src="js/script.js"></script>
</body>
</html>
My JS:
var toDoItems = [];
var userInput;
var checkBox;
document.getElementById("addItem").onclick = function (){
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
stylePara();
document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());
}
function stylePara(){
var html = '';
html += '<label class="container">';
html += '<input type="checkBox">';
html += '<span class="checkMark"></span>';
html += '<span class="checkLabel">' + userInput + '</span>';
html += '</label>';
return html;
}
My CSS:
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: center;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
color: black;
margin-bottom: 35px;
text-decoration: underline;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
You can use absolute positioning:
.your-class {
position: absolute;
top: 10px; /* space from top */
right: 10px; /* space from right */
}
For your puropses the top and right are:
Remember to give parent element:
.position:relative;
Then your absolute positioning will be to the container that has position:relative not to the whole page. Example code: https://jsfiddle.net/2vaphyq3/12/
Edit:
But maybe cleaner way will be to use pseudo element like :after
Something in this manner should work. Added to your existing code.
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: left;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
padding: 10px;
color: black;
margin-bottom: 35px;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Added This*/
.wholeItem {
width: 400px;
height: auto;
}
h1.todoL{
position: relative;
background: #c7c9d6;
border-bottom: 1px solid #999;
}
.todoI {
position: absolute;
right: 25%;
bottom: -25px;
width: 50px;
height: 50px;
background: #da5048;
border-radius: 50%;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: light;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<div class="wholeItem">
<h1 class='todoL'>Your todo list<div class="todoI">+</div></h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.
How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>
Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage
I've got problems when going from a normal navbar that just sits in the top side of the browser and disappears when you scroll down to a position:fixed navbar that stays at the top of the browser even when you scroll.
This is the codepen: https://codepen.io/bleah1/pen/gjYBgQ
The problem is that when I add position:fixed and top:0; left:0; right:0; to the .header-container it shrinks and moves the .navigation-bar lower and it pushes the .logo to the left, making it stick to the left side of the browser. I've tried changing some values but I still could not make it work and look good.
Also, the HTML is made kind of in reverse: first for the smaller window size, like phones or tablets and then for the bigger devices.
Full disclosure: These are not my ideas, I saw them on YouTube and I recreated them in an attempt to learn. These are the videos:
https://www.youtube.com/watch?v=FqbOu5ZRFag
https://www.youtube.com/watch?v=Ah_Zitni1y4&
Do you have any idea on what to change to make it work ? Thank you !
/*global $:false */
/*exported formValidationSetup, refreshErrorMessages */
/*jshint unused:false*/
$('.menu-toggle').click(function(){
$('.navigation-bar').toggleClass('navigation-bar--open', 500);
$(this).toggleClass('menu-toggle--open');
});
$(".button").on("click",function(){
$(".input").toggleClass("inclicked");
$(".button").toggleClass("close");
});
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
header{
background-color: #1F2833;
position: relative;
color: #45A29E;
padding: 1em 0;
}
header::after{
content: '';
clear: both;
display: block;
}
body{
font-family: 'Quicksand', sans-serif;
background-color: brown;
margin:0 auto;
/*overflow: hidden;*/
}
.header-container {
position:fixed; /* This creates the problem*/
width:95%; /*changing this to 100% does nothing */
max-width: 1250px;
margin: 0 auto;
backgrounnd-color:#1F2833;
}
.logo {
color:#45A29E;
float:left;
font-size:1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.navigation-bar {
position: absolute;
top: 100%;
right: 0%;
background-color: #1F2833;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
}
.navigation-bar--open{
clip-path: circle(150% at top right);
}
.navigation-bar ul {
margin: 0;
padding:0;
list-style: none;
}
.navigation-bar li{
border-bottom: 1px solid #C5C6C7;
}
.navigation-bar li:last-child{
border-bottom: none;
}
.navigation-bar a{
color: #45A29E;
display: block;
padding: 2em 3em 2em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background: #C5C6C7;
color: #0B0C10;
}
.navigation-bar--icon{
display: block;
font-size: 1.5em;
margin-right: 1em;
width:1.3em;
text-align: right;
color: rgba(255,255,255,.25);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content:'';
display:block;
background: black;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.menu-toggle--open .hamburger{
transform: rotate(45deg);
}
.menu-toggle--open .hamburger::before{
opacity: 0;
}
.menu-toggle--open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
.search-container{
display: none;
}
.cover{
background: blue;
height:300px;
width:400px;
}
#media (min-width: 1250px){
.menu-toggle {
display: none;
}
.header-container{
max-width: 1200px;
}
.navigation-bar {
height: auto;
position: relative;
background: #1F2833;
float:right;
clip-path:initial;
}
.navigation-bar li{
display: inline-block;
border: none;
}
.navigation-bar a{
padding:0;
margin-left: 2em;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background:transparent;
color: rgba(255,255,255,.25);
}
.navigation-bar--icon {
display: none !important;
}
.search-container{
display: inherit;
position: relative;
float: right;
top:-5px;
margin-left: 2em;
}
}
.input{
width: 30px;
height: 30px;
background: none;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.25);
box-sizing:border-box;
outline:none;
transition: width 600ms ease-in-out, border-radius 800ms ease-in-out, padding 200ms;
transition-delay: 300ms;
color:white;
font-size: 16px;
}
.inclicked{
width: 300px;
border-radius: 0;
padding: 0 15px;
padding-right: 40px;
}
.button{
position: absolute;
width:30px;
height:30px;
top:0;
right:0;
box-sizing:border-box;
background:none;
border:none;
outline: none;
cursor:pointer;
}
.button::before{
content:'';
width:3px;
height:15px;
background:rgba(255,255,255,0.25);
position: absolute;
transform: rotate(-45deg);
bottom: -10px;
right: -5px;
transition:500ms;
}
.close::before, .close::after{
content:'';
width:3px;
height: 20px;
background:rgba(255,255,255,1);
position: absolute;
bottom: 5px;
right: 15px;
border-radius: 10px;
}
.close::before{
transform: rotate(-45deg);
}
.close::after{
transform: rotate(45deg);
}
}
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css' rel='stylesheet'>
<link href="navigation-bar.css" type="text/css" rel="stylesheet">
<link href="containers.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Mangacious</title>
</head>
<header>
<div class="header-container">
<h1 class="logo">Mangacius</h1>
<div class="search-container search-container-2">
<form class="search-box" action="index.html" method="post">
<input class="input input-2" type="text" name="search">
<button class="button" type="button" name="button"></button>
</form>
</div> <!--Little Browser Search Bar-->
<nav class="navigation-bar">
<ul>
<li><i class="fa fa-home navigation-bar--icon"></i>Home</li>
<li><i class="fa fa-calendar-check navigation-bar--icon"></i>Today's Uploads</li>
<li><i class="fa fa-list-ol navigation-bar--icon"></i>Top 100</li>
<li><i class="fa fa-store navigation-bar--icon"></i>Store</li>
<li><i class="fas fa-th-list navigation-bar--icon"></i>My List</li>
<li><i class="fas fa-user-cog navigation-bar--icon"></i>User Control Panel</li>
</ul>
</nav> <!-- Navigation Bar -->
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div><!-- Header Container -->
</header>
<body>
<div class="container new-releseas">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div><!-- New Releseas -->
<div class="container must-reads">
</div><!-- Must Reads -->
<div class="container current-series">
</div><!-- Current Series -->
<div class="footer-container">
</div><!-- Footer Container -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Check the new Codepen link, I have fixed the position issue
https://codepen.io/nelh/pen/ejOPwE?editors=1100