I have a menu that I want to drop down when you click on the hamburger icon. The list items show up after the button is clicked, but is still seen when the button is not clicked. I can't figure out how to hide the menu.
I have the code here: Codepen
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
$(document).ready(function() {
$('#nav-icon3').on('click', function() {
$(this).toggleClass('open');
});
});
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 1rem;
}
.header {
background-color: #FFF;
width: 100%;
margin: 0px auto;
display: block;
top: 0;
margin-top: 7%;
height: 80px;
}
h1 {
margin-left: 5%;
padding-left: 1%;
font-family: 'Lobster', cursive;
margin-top: 0;
float: left;
margin-bottom: 0;
color: #D18E8F;
}
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin-right: 7%;
margin-top: 8px;
/*padding-right: 1%;*/
float: right;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #8c8c8c;
border-radius: 6px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
top: 10px;
}
#nav-icon3 span:nth-child(4) {
top: 20px;
}
#nav-icon3.open span:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 10px;
width: 0%;
left: 50%;
}
.topnav.responsive {
/*display: none;*/
clear: both;
padding: 0;
height: 160px;
}
ul.topnav.responsive {
list-style: none;
font-family: 'Raleway', 'sans-serif';
float: left;
margin-left: 7%;
/*padding-left: 2%;*/
margin-top: 0;
width: 85%;
margin-bottom: 0;
}
ul.topnav.responsive li {
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #c6c6c6;
}
ul.topnav.responsive li a {
text-decoration: none;
color: #8c8c8c;
}
ul.topnav.responsive li a:hover {
color: #7EBEA3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Gabriella Farfan</title>
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<h1>Gabriella Farfan</h1>
<div id="nav-icon">
<div id="nav-icon3">
<a id="nav-icon3" onclick="myFunction();">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
<ul class="topnav" id="myTopnav">
<li>
Work
</li>
<li>
About Me
</li>
<li style="border-bottom: none">
Contact
</li>
</ul>
</div>
</body>
</html>
Just add .topnav { display: none; } and .topnav.responsive { display: block; } and your code will work fine.
.topnav {
display: none;
}
.topnav.responsive {
display: block;
clear: both;
padding: 0;
height: 160px;
}
You can also add this for make full hamburger clickable (not only line).
#nav-icon3 {
width: 30px;
height: 30px;
display: block;
}
Working fork of your code: Сodepen
I have made this little fix. Hope it helps.
CSS:
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 1rem;
}
.header {
background-color: #FFF;
width: 100%;
margin: 0px auto;
display: block;
top: 0;
margin-top: 7%;
height: 80px;
}
h1 {
margin-left: 5%;
padding-left: 1%;
font-family: 'Lobster', cursive;
margin-top: 0;
float: left;
margin-bottom: 0;
color: #D18E8F;
}
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin-right: 7%;
margin-top: 8px;
/*padding-right: 1%;*/
float: right;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #8c8c8c;
border-radius: 6px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
top: 10px;
}
#nav-icon3 span:nth-child(4) {
top: 20px;
}
#nav-icon3.open span:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 10px;
width: 0%;
left: 50%;
}
.responsive {
/*display: none;*/
clear: both;
padding: 0;
height: 160px;
}
ul.responsive {
list-style: none;
font-family: 'Raleway', 'sans-serif';
float: left;
margin-left: 7%;
/*padding-left: 2%;*/
margin-top: 0;
width: 85%;
margin-bottom: 0;
}
ul.responsive li {
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #c6c6c6;
}
ul.responsive li a {
text-decoration: none;
color: #8c8c8c;
}
ul.responsive li a:hover {
color: #7EBEA3;
}
.topnav{
display:none;
}
JS:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className = " responsive";
} else {
x.className = "topnav";
}
}
Please let me know if this is what you wanted.
Related
I need this to be placed 20px from the bottom of the page, but every time I try to give it absolute positioning, it jumps halfway outside the div or it becomes longer.
It was centered using display:flex and justify-content:center. The exact same problem occurs with the socila icons, which need to be at the top on desktop and at the bottom on mobile, but if I give them an absolute position, then they are no longer centered.
Here is the entire page for you to see what I need, and thank you so much for your time:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/234b945d49.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
}
#main-menu-container{
right:0;
}
.sidenav {
padding:0;
height: 100%;
margin:0;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
right: 0;
background: radial-gradient(#3d77a7, #264c6d);
overflow-x: hidden;
transition: 0.5s ease-in-out;
text-align: center;
}
.sidenav ul{
list-style: none;
padding: 150px 0 0 0;
text-align:center;
display: inline-block;
}
.sidenav ul a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
color:white;
font-weight:bold;
display: block;
transition: 0.3s;
}
.sidenav ul a:hover {
color: #ffdc00;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
color:#ffdc00;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* #media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
} */
#nav-icon3 {
width: 40px;
height: 30px;
position: fixed;
top:20px;
right:20px;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #ffdc00;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.social-icons {
display: flex;
justify-content: center;
position:absolute;
top: 20px;
}
.social-icons i{
color:#ffdc00;
padding:5px;
transition: 0.3s;
}
.social-icons i:hover{
color: white;
}
.menu-separator {
/* position:relative;
bottom:50px; */
border: none;
border-radius: 2px;
height: 7px !important;
opacity: 100%;
color: #ffdc00; /* old IE */
background: #ffdc00; /* Modern Browsers */
width: 80%;
margin: 20px auto 20px auto;
}
.menu-additional-links{
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
.menu-additional-links a{
text-decoration: none;
padding: 20px 15px 20px 15px;
color: white;
}
.menu-additional-links a:hover{
color: #ffdc00;
}
/*MOBILE BREAKPOINTS*/
#media only screen and (max-width: 768px) {
}
</style>
</head>
<body>
<div id="main-menu-container">
<div id="mySidenav" class="sidenav" role="navigation">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
<div class="social-icons">
<i class="fab fa-facebook-square fa-2xl"></i>
<i class="fab fa-instagram-square fa-2xl"></i>
<i class="fab fa-linkedin fa-2xl"></i>
</div>
<hr class="menu-separator">
<div class="menu-additional-links">
Datenschutzerklärung
Impressum
</div>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span class="breakpoint"></span>
</div>
<script>
//check screen width via javascript, and pass a diffrent width to the nav menu
const mediaQuery = window.matchMedia('(min-width: 768px)')
let menuWidth = "";
if (mediaQuery.matches){menuWidth = "500px";} else {menuWidth = "100vw";}
function handleScreenChange(e){
if (mediaQuery.matches){
menuWidth = "500px";
} else {
menuWidth = "100vw";
}
}
mediaQuery.addListener(handleScreenChange);
//set the width and play the animation on hamburger click
$("#nav-icon3").click(function() {
if (document.getElementById('nav-icon3').classList.contains("open")){
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
else{
document.getElementById("mySidenav").style.width = menuWidth;
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
}
document.getElementById('nav-icon3').classList.toggle("open");
});
</script>
</body>
</html>
You can try with this styles to hr
position: absolute;
bottom: 20px;
margin-left: 10%;
You have 80% for the width, so a left of 10% makes hr centered
I’m trying to make a menu open button for my website, but there’s one slight problem, when I try to assign it to move vertically, for example do margin-top: 100px it won’t move. But when I set a margin-left it changes position and moves horizontally! I have no idea as to why this is happening. I would love to get some advice on how to put the menu button a bit further downwards. I have a feeling it has something to do with the attribute being a span, but I have no idea. Any help is greatly appreciated.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
background-size: cover;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
font-size: 40px;
display: inline-block;
width: 160px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 0px;
padding-bottom: 5px;
}
.navMenu a:hover {
color: #fddb3a;
}
.navMenu .dot {
width: 6px;
height: 6px;
background: #fddb3a;
border-radius: 50%;
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot {
-webkit-transform: translateX(80px);
transform: translateX(80px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover~.dot {
-webkit-transform: translateX(240px);
transform: translateX(240px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover~.dot {
-webkit-transform: translateX(400px);
transform: translateX(400px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover~.dot {
-webkit-transform: translateX(570px);
transform: translateX(570px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
.overlay .closebtn {
position: absolute;
top: 20px;
margin-right: 20px;
right: 45px;
font-size: 120px;
}
.openNav {
font-size: 50px;
margin-left: 100px;
color: black;
}
#media screen and (max-width: 1305px) {
.dot {
display: none;
}
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<nav class="navMenu">
Home
Blog
Work
About
<div class="dot"></div>
</nav>
</div>
</div>
<span class="openNav" style="cursor: pointer;" onclick="openNav()">☰</span>
</body>
</html>
I have a feeling it has something to do with the attribute being a span
That is right, because the span is by default has display: inline, and if you change it to display: block and apply some margin-top: 100px you see it changes the position.
.openNav{
display: block;
margin-top: 100px;
}
another question regarding my school project. We have to add a menu to our website and i thus googled for a premade menu. Unfortunately, as soon as i add the menu the website layout doesn't really work any more. I already tried making the position absolute but haven't got it to work.
<html lang="de">
<head>
<title>Virtual Reality - Headsetüberblick</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="colorlib-main-nav" role="navigation">
<i></i>
<div class="js-fullheight colorlib-table">
<div class="img" style="background-image: url(images/bg_3.jpg);"></div>
<div class="colorlib-table-cell js-fullheight">
<div class="row no-gutters">
<div class="col-md-12 text-center">
<h1 class="mb-4">Gruppe 1</h1>
<ul>
<li class="active"><span>Virtual Relity</span></li>
<li><span>Thema 2</span></li>
<li><span>Thema 3</span></li>
<li><span>Thema 4</span></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<i></i>
<div class="introduction header h-100 container-fluid d-flex w-100 text-center">
<h1 id="h-100" class="h-100 row col-12 align-items-center text-center display-1 justify-content-center">VIRTUAL REALITY</h1>
</div>
<div class="h-100 container-fluid row">
<h2 style="margin-top: 50px;" class="center col-12 text-center display-4">Was ist Virtual Reality (VR)</h2>
<p class="center col-12 lead">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>
...
<div class="footer-basic">
<footer>
<p class="copyright">Lukas Strutz 2021</p>
</footer>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function toggleDiv(whichdiv) {
var x = document.getElementById(whichdiv);
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
(function($) {
"use strict";
var fullHeight = function() {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
};
fullHeight();
var burgerMenu = function() {
$('.js-colorlib-nav-toggle').on('click', function(event) {
event.preventDefault();
var $this = $(this);
if( $('body').hasClass('menu-show') ) {
$('body').removeClass('menu-show');
$('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
} else {
$('body').addClass('menu-show');
setTimeout(function(){
$('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
}, 900);
}
})
};
burgerMenu();
})(jQuery);
</script>
</body>
</html>
/*
Stylesheet zur VR-Website - Lukas Strutz 2021
Inhalt:
1. Grundsätztliches Design der Website
2. Design des Menüs (bezogen von Colorlib)
3. Design des Footers (bezogen von epicbootstrap.com)
*/
#font-face {
font-family: 'cf_glitch_cityregular';
src: url('fonts/cfglitchcityregular-l1vz-webfont.woff2') format('woff2'),
url('fonts/cfglitchcityregular-l1vz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html, body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
}
#h-100{
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
/*h1 {
top: 50%;
transform: translateY(-50%);
}*/
h1{
font-family: "cf_glitch_cityregular";
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sketchfab-embed-wrapper{
height: 100%;
margin-bottom: 200px;
}
iframe{
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center{
text-align: center;
}
.steamvr{
background-image: url("https://www.vrnerds.de/wp-content/uploads/2016/02/Steam-VR-Spiele.png");
}
.oculus{
background-image: url("oculus.jpg");
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll; }
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%; }
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1; }
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3); }
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle; }
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1; }
#colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0; }
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif; }
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px; }
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block; }
#media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0; } }
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase; }
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0; }
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px; }
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none; }
#colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
#colorlib-main-nav ul li.active a span {
color: #f8b500; }
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
#media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute; } }
header .colorlib-navbar-brand {
float: left; }
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase; }
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px; }
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px; }
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important; }
header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none; }
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none; }
.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
background: #000; }
.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
background: #000; }
.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important; }
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: white;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
background: #fff; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle i::before {
top: -7px; }
.colorlib-nav-toggle i::after {
bottom: -7px; }
.colorlib-nav-toggle:hover i::before {
top: -10px; }
.colorlib-nav-toggle:hover i::after {
bottom: -10px; }
.colorlib-nav-toggle.active i {
background: transparent; }
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0; }
#media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px; } }
.hero-wrap {
background: #202020; }
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase; }
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px; }
.footer-basic {
padding:40px 0;
background-color:#000;
/*color:#6b6c6d;*/
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:rgb(255, 255, 255);
margin-bottom:0;
}
/* Credit to https://epicbootstrap.com/snippets/footer-basic */
You can also see this online at: https://lukasstrutz.de/website/thisdoesnotwork.html
Im working on a slider and im burn out, you guys know how it is, working on something so much eventually the brain just cant do it, so im going to leave it for today and ask you if you have an answer for the issue.
So heres my slider on html
.header {
grid-area: header;
border: 1px solid black;
background-color: black;
}
.slideshow {
width: 923px;
height: 500px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
}
.slideshow-container {
width: 4615px;
font-size: 0;
transition: 1s ease;
height: 500px;
overflow: hidden;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
.img1 {
width: 923px;
height: auto;
object-fit: cover;
}
.img2 {
width: 923px;
height: auto;
object-fit: cover;
}
.img3 {
width: 923px;
height: auto;
object-fit: cover;
}
.img4 {
width: 923px;
height: auto;
object-fit: cover;
}
.img5 {
width: 923px;
height: auto;
object-fit: cover;
}
#keyframes slide {
10% {
margin-left: 0px;
}
20% {
margin-left: -923px;
}
30% {
margin-left: -923px;
}
40% {
margin-left: -1846px;
}
50% {
margin-left: -1846px;
}
60% {
margin-left: -2769px;
}
70% {
margin-left: -2769px;
}
80% {
margin-left: -3692px;
}
90% {
margin-left: -3692px;
}
}
.dot1 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 400px;
z-index: 2;
}
.dot1:hover {
border: 2px solid white;
background-color: black;
}
.dot2 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 430px;
z-index: 2;
}
.dot3 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 460px;
z-index: 2;
}
.dot4 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 490px;
z-index: 2;
}
<div class="header">
<div class="slideshow">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
<div class="slideshow-container slide">
<img class="img1" src="https://i.imgur.com/xGMtCkJ.jpg">
<img class="img2" src="https://i.imgur.com/1F5Gtuz.jpg">
<img class="img3" src="https://i.imgur.com/GgikuGI.jpg">
<img class="img4" src="https://i.imgur.com/LlTDfcH.jpg">
<img class="img5" src="https://i.imgur.com/hNLNCgQ.png">
</div>
</div>
</div>
So here is what the slider and keyframes look like
What im looking for is a part of a code that i can include to
.dot1:hover {
border: 2px solid white;
background-color: black;
}
So what i want is that when someone hover's over the first dot the slider goes to the first keyframe or image, and so on with the other dots, if anyone knows a way to make that happen without javascripts and if i can reverse the keyframe animation that would be perfect.
thanks :)
It's possible using CSS:
Here is the snippet for slider using pure css:
.csslider {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider > .cs_anchor {
display: none;
}
.csslider > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider > ul > li.img img {
width: 100%;
}
.csslider > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.csslider > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .cs_description {
z-index: 3;
}
.csslider > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider > .slide:hover ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider > #cs_slide1_0:hover ~ ul > li.num0,.csslider > #cs_slide1_1:hover ~ ul > li.num1,.csslider > #cs_slide1_2:hover ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
.csslider > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider > .slide:hover ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > #cs_slide1_0:hover ~ .cs_bullets > label.num0,
.csslider > #cs_slide1_1:hover ~ .cs_bullets > label.num1,
.csslider > #cs_slide1_2:hover ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
</title>
</head>
<body>
<div class='csslider autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' hover>
<input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
</div>
<li class='num0 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' />
</li>
<li class='num1 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' />
</li>
<li class='num2 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' />
</li>
</ul>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'>
<span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'>
<span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'>
<span class='cs_point'></span>
</label>
</div>
</div>
</body>
</html>
I had codyhouse's css animations tutorial which was really nice. We wrote this navigation menu and I wanted to tweak it further to my likes.
I guess I'm trying to show the navigation links on screens that are bigger than 640px and make it invisible (like this current state) on all other screen sizes.
Codepen
var navTrigger = document.getElementsByClassName('nav-trigger')[0],
body = document.getElementsByTagName('body')[0];
navTrigger.addEventListener('click', toggleNavigation);
function toggleNavigation(event) {
event.preventDefault();
body.classList.toggle('nav-open');
}
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1;
margin: 0;
width: 100%;
height: 100%;
background: #333;
}
main {
position: relative;
z-index: 1;
height: 100vh;
overflow: hidden;
transition: transform .5s;
box-shadow: 0 0 50px #000;
}
.nav-open main {
transform: scale(.8)
}
.intro {
height: 100vh;
width: 100%;
display: table;
background: #f3f3f3;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 45px;
color: #ddd;
}
.nav-trigger {
position: fixed;
z-index: 4;
top: 40px;
right: 40px;
height: 44px;
width: 44px;
overflow: hidden;
color: transparent;
white-space: nowrap;
text-indent: 100%;
}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
position: absolute;
height: 4px;
width: 36px;
background: #111;
transition: all .3s;
}
.nav-trigger span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-trigger span::before,
.nav-trigger span::after {
content: '';
top: 0;
left: 0;
}
.nav-trigger span::before {
transform: translateY(-12px);
}
.nav-trigger span::after {
transform: translateY(12px);
}
.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
background: #888;
}
.nav-open .nav-trigger span {
background: transparent;
}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
background: #888;
}
.nav-open .nav-trigger span::before {
transform: rotate(-45deg);
}
.nav-open .nav-trigger span::after {
transform: rotate(45deg);
}
.overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #333;
opacity: 0;
visibility: hidden;
transition: all .5s;
}
.nav-open .overlay {
opacity: .5;
visibility: visible;
}
.nav-container {
position: fixed;
z-index: 3;
top: 0;
right: 0;
height: 100%;
width: 100%;
padding: 3em 3.5em;
background: #343434;
overflow: auto;
transform: translateZ(0);
transform: translateY(-100%);
transition: transform .5s cubic-bezier(.07,.23,.34,1);
}
.nav-open .nav-container {
transform: translateX(0);
}
.nav {
list-style: none;
padding: 0;
}
.nav a {
display: block;
padding: .6em 0;
font-size: 30px;
font-family: bold;
font-family: sans-serif;
text-decoration: none;
color: #747474;
transform: translateZ(0);
}
.nav-open .nav a {
animation: slide-in .4s .2s backwards;
}
.nav-open .nav li:nth-of-type(2) a {
animation-delay: .3s;
}
.nav-open .nav li:nth-of-type(3) a {
animation-delay: .4s;
}
.nav-open .nav li:nth-of-type(4) a {
animation-delay: .5s;
}
.nav-open .nav li:nth-of-type(5) a {
animation-delay: .6s;
}
.nav li {
text-align: center;
}
#keyframes slide-in {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#media only screen and (min-width : 640px) {
/* .nav-trigger {
visibility: hidden;
} */
/* .nav li {
display: inline-block;
z-index: 60;
} */
}
<body>
<a href="#navigation" class="nav-trigger">
Menu<span></span>
</a>
<main>
<section class="intro">
<h1>Final Project</h1>
</section>
</main>
<nav class="nav-container" id="navigation">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="overlay"></div>
</body>