I've created a full page video background homescreen for a website and am wanting to add the next section "About" below the homepage however, the about-section is stuck to the top of the site and I can't figure out why. I'd like the video background to remain fixed so it covers the entire site, I also have a sidebar that pops in with menu options so I believe I'm going wrong somewhere with the positioning of it all.
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500;700&family=Oxygen:wght#300;400;700&family=Space+Grotesk:wght#300;400;500;700');
#import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght#300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
#media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}
<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<img class="logo" src="/images/logo.png" alt="">
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-github fa-3x"></i>
<i class="fab fa-linkedin fa-3x"></i>
</div>
</section>
Thanks in advance if anyone can point out where I'm going wrong!
you can do .showcase{ position: relative} so it will look like this:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
it will fix it, if you must have show case as absolute, so you can do
#about {
position:absolute;
top:100vh;
width:100vw;
}
Related
Hello I have a project for my studies which is to display data on a dashboard that will be more or less modifiable by the user according to his needs.
I'm trying to open a modal window but it doesn't work and i can't figure out where my mistake came from.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelector(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
Adding to the earlier answer, the modal window doesn't close on clicking the close button. It only closes by clicking outside of it. This should solve it all: remove the modal-trigger class in the overlay class. It should be <div class="overlay"> not <div class="overlay modal-trigger"> and for demonstration, I changed the background colour
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: purple;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#" class="modal-trigger">
<i class='bx bx-customize'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
</body>
</html>
It should be working now, remember that querySelector() only grab the first match, you should use querySelectorAll() method instead, that is iterable and grabs all elements that match.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
I'm coding this website and I can not find the solution. It is so frustrating having a user scrolling through the website with the navbar following them.
Yet, I can not find the solution to the problem.
I've managed to apply the solution to a vertical scrolling website, however on the horizontal scrolling one, it does not work.
The idea is that the navbar hides / shows up on scroll left / right.
So, here's the HTML:
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>
<script src="js/app.js"text/javascript"></script>
There are no errors in the HTML code.
Here's the CSS code:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
I believe there may be some incorrect styling in the CSS code.
However,
Here's the JavaScript code:
var prevScPos = window.pageXOffset;
window.addEventListener('scroll', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
Any help is appreciated.
Thanks in advance.
You need to change the scroll event to wheel..
window.addEventListener('wheel', function() { ...
var prevScPos = window.pageXOffset;
window.addEventListener('wheel', function() {
var curScPos = window.pageXOffset;
if (prevScPos > curScPos) {
document.getElementById("navbar").style.left = "0";
} else {
document.getElementById("navbar").style.left = "-60px";
}
prevScPos = curScPos;
})
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
transition: 0.6s;
padding: 22px 100px;
z-index: 100000;
/* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
position: absolute;
top: 0;
left: 0;
border-right: 1px solid var(--clr-green);
border-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100vh;
max-width: 3%;
text-align: center;
}
.nav-links li {
transform: rotate(-90deg);
margin-bottom: 3rem;
}
.nav-links a{
font-family: var(--ff-main);
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 0.243rem;
font-size: 12px;
text-decoration: none;
color: inherit;
}
.slide {
width: 100vw;
height: 100vh;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.one {
position: relative;
background: var(--clr-black);
z-index: 2;
}
.one video {
position: absolute;
z-index: 0;
opacity: 0.8;
width: 100vw;
object-fit: cover;
filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
margin-left: 11rem;
}
.one-content #art {
position: absolute;
top: 6rem;
left: 3rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #is {
position: absolute;
top: 15rem;
left: 33rem;
font-size: 6rem;
font-weight: 100;
text-transform: uppercase;
}
.one-content #where {
position: absolute;
top: 22rem;
left: 43rem;
font-size: 6rem;
font-weight: 600;
text-transform: uppercase;
}
.one-content #the {
position: absolute;
top: 33rem;
left: 11rem;
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
.one-content #work {
position: absolute;
top: 33rem;
left: 22rem;
font-size: 9rem;
font-weight: 700;
text-transform: uppercase;
}
.one-content #meets {
position: absolute;
top: 40rem;
left: 56rem;
font-size: 2rem;
font-weight: 200;
text-transform: uppercase;
}
.one-content #love {
position: absolute;
top: 47rem;
left: 50rem;
font-size: 11rem;
font-weight: 900;
text-transform: uppercase;
}
.one-content #hands {
opacity: 1;
position: absolute;
top: 0rem;
right: -25rem;
width: 50rem;
}
.wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
z-index: 0;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
#navbar { position:absolute;}
<header id="navbar">
<ul class="nav-links hidden">
<li>Home</li>
<li>About</li>
<li>Careers</li>
<li>Order Now</li>
</ul>
</header>
<section class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<video muted loop autoplay>
<source src="videos/2.mp4" />
</video>
<div class="one-content">
<h3>
<span id="art">art</span>
<span id="is">is</span>
<span id="where">where</span>
<span id="the">the</span>
<span id="work">work</span>
<span id="meets">meets</span>
<span id="love">love.</span>
</h3>
<img src="images/hands.png" id="hands" />
</div>
</div>
</div>
</section>
Add the following CSS to the element.
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}
.outer-wrapper::-webkit-scrollbar{
display: none;
}
For SCSS,
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
&:-webkit-scrollbar {
display: none;
}
}
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm having issues making the hamburger icon be on top of the banner image. I've tried adjusting the z-index, setting the nav background-color to transparent, and placing the background image in the header instead of the banner section. I don't know what other steps to take. Any advice would be greatly appreciated.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
Like this?
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
position: absolute;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
A little explanation on what I've done here (presuming this is the treatment you are looking for): By positioning the hamburger as absolute, we pull it completely out of the static layout flow, so other elements ignore its existence when positioning. The element's location can then be controlled with left, right, top and bottom, and will position itself relative to the first ancestor element positioned absolutely, or the body if no element is positioned absolutely. You'll probably want to consider dialing in the positioning a bit with these attributes, as you might not want to rely on the browser to calculate its position with defaults.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
position: absolute;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>