Text appearing under meniu page CSS HTML - javascript

I created a HTML Website and I have a problem with it, i got a menu from the Internet and edited the website and now I realized that the menu items appear under the menu background.
I got the website online on andrei-marin.com you can check it out.
One thing i discovered is that if you put 'display: flex' in the header, the meniu works perfect but everything is out of the place..
I will add the code below.
// function to open/close nav
function toggleNav(){
// if nav is open, close it
if($("nav").is(":visible")){
$("nav").fadeOut();
$("button").removeClass("menu");
}
// if nav is closed, open it
else{
$("button").addClass("menu");
$("nav").fadeIn().css('display', 'flex');
}
}
// when clicking + or ☰ button
$("button").click(function(){
// when clicking ☰ button, open nav
if($("header").hasClass("open")){
toggleNav();
}
// when clicking + button, open header
else{
$("header").addClass("open");
}
});
// close nav
$("#nav-close").click(function(){
toggleNav();
});
// scroll to sections
$("nav li").click(function(){
// get index of clicked li and select according section
var index = $(this).index();
var target = $("content section").eq(index);
toggleNav();
$('html,body').delay(300).animate({
scrollTop: target.offset().top
}, 500);
});
/* GLOBAL STYLES */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: lightgray;
}
.main_image{
padding-top:50%;
background-image: url('bg.jpg');
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter{
margin-top:25%;
font-size: 20px;
}
.typewriter h1 {
color: #fff;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
header {
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
header button {
position: relative;
z-index: 10;
}
header button {
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
bottom: 100px;
left: calc(50% - 60px);
width: 120px;
height: 50px;
border: 0;
box-shadow: 2px 1px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
cursor: pointer;
background: #fff;
font-size: 1em;
color: #09203f;
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
overflow: hidden;
}
header button:hover {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
header button:focus {
outline: 0;
}
header button:before, header button:after {
font-family: "Font Awesome 5 Free";
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
top: 17px;
position: absolute;
}
header button:before {
content: "\f067";
opacity: 1;
left: 53px;
}
header button:after {
content: "\f0c9";
opacity: 0;
left: 0;
}
header.open button {
position: fixed;
left: 40px;
bottom: 40px;
width: 50px;
border-radius: 50%;
}
header.open button:before {
opacity: 0;
left: 100%;
}
header.open button:after {
opacity: 1;
left: 18px;
}
header.open button.menu {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 0;
}
header.open button.menu:after {
left: -100%;
}
content section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 2pt;
color: #fff;
}
nav {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
nav ul {
list-style: none;
}
nav ul li {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 2;
letter-spacing: 1pt;
font-size: 2em;
color: #09203f;
animation: fadeDown .5s forwards;
opacity: 0;
cursor: pointer;
transform: translateY(-20px);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
nav ul li:hover {
text-shadow: 2px 1px 40px rgba(0, 0, 0, 0.5);
opacity: .8;
}
nav ul li:nth-child(1) {
animation-delay: 0.8s;
}
nav ul li:nth-child(2) {
animation-delay: 0.9s;
}
nav ul li:nth-child(3) {
animation-delay: 1s;
}
nav #nav-close {
position: fixed;
top: 40px;
right: 40px;
font-size: 1.5em;
cursor: pointer;
animation: fadeDown .5s forwards;
animation-delay: 1.1s;
opacity: 0;
color: #09203f;
transform: translateY(-20px);
}
#keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Andrei Marin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel="stylesheet" href="master.css">
</head>
<body>
<header>
<div class="main_image">
<div class="typewriter">
<h1>Andrei Marin</h1>
</div>
<button></button>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="nav-close"><i class="fas fa-times"></i></div>
</nav>
<content>
<section>Home</section>
<section>About</section>
<section>Projects</section>
<section>Contact</section>
</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="master.js"></script>
</body>
</html>


Try removing your z-index: 10; in header button{ (line 59) ?

Related

Close the overlay fullscreen menu when anchor link is clicked

I am not good in Javascript, and I know this is very easy for some of you.
I adopted the overlay fullscreen menu from Codepen. I am trying to figured it out how I can close the overlay fullscreen menu when I clicked the anchor link.
snippet here
#import "http://webfonts.ru/import/notcourier.css";
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
can anyone help me to close the overlay fullscreen menu by adding javascript on the code?

$( ".target" ).click(function() {
$("#op").prop('checked', false);
});
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a class="target" href="#">Home</a></li>
<li><a class="target" href="#">About</a></li>
<li><a class="target" href="#">Work</a></li>
<li><a class="target" href="#">Clients</a></li>
<li><a class="target" href="#">Contact</a></li>
</ul>
</nav>
</div>

Hambuger menu does not respond when clicked (HTML/CSS/JS)

Creating a basic HTML/CSS webpage. I added some CSS and JavaScript features so that the hamburger menu icon could be clicked and show a sidebar. After implementing JavaScript, the sidebar no longer shows on screen (which was what I wanted), but now the hamburger menu icon is unresponsive and does not reveal the sidebar. I looked over my HTML and CSS but could not find the problem. My code matches the source code of the guide I am following. Any help would be greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8:">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br>
1. Placeholder <br>
2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link"
data-content="Home">Home</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH2">PH2</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH3">PH3</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
data-content="PH4">PH4</a>
</li>
</ul>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0,0,0, .2);
}
.line {
background-color: rgba(0,0,0, .8);
}
.change .line-1 {
transform: rotate(45deg)
translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg)
translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0,0,0, 0.2);
box-shadow: 0.3rem .5rem rgba(0,0,0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
JavaScript
document.querySelector('.hamburger-menu').
addEventListener('click, () => {
document.querySelector('container').classlist.toggle('change')
});

Few things:
You are missing a closing bracket here: addEventListener('click,
classlist should be classList, JS properties are case-sensitive
document.querySelector('container') is looking for the first container element. Use document.querySelector('.container') to get the first element with the class container
document.querySelector('.hamburger-menu').addEventListener('click', () => {
document.querySelector('.container').classList.toggle('change')
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: .2rem;
background-color: #FFFFFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, .2);
}
.line {
background-color: rgba(0, 0, 0, .8);
}
.change .line-1 {
transform: rotate(45deg) translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg) translate(0.3rem, -0.8rem);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation-name: scale;
animation-duration: 25s;
filter: blur(8px);
-webkit-filter: blur(8px);
}
#keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Sans-serif";
font-size: 9rem;
font-weight: 300;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
opacity: 0;
animation: moveBanner 1s .5s;
animation-fill-mode: forwards;
}
.banner p {
font-family: "Sans-serif";
font-size: 2.5rem;
color: #FFFFFF;
width: 70%;
text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
margin-bottom: 3rem;
opacity: 0;
animation: moveBanner 1s .7s;
animation-fill-mode: forwards;
}
.banner button {
width: 20rem;
height: 5rem;
background-color: #FFFFFF;
border: none;
font-family: "Sans-serif";
text-transform: uppercase;
text-shadow: 0.2rem .2rem rgba(0, 0, 0, 0.2);
box-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s;
animation-fill-mode: forwards;
}
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #FFFFFF;
transition: right .5s;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
margin: 0 0 40px 0;
}
.menu-link {
font-family: "Sans-serif";
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #555;
overflow: hidden;
white-space: nowrap;
transition: width .3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #FFF;
isplay: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8:">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Placeholder</title>
<link rel="stylesheet" href="stylesheet2.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="ThinkDirBackground1.jpg" />
</div>
<div class="banner">
<h1>Placeholder</h1>
<p>Placeholder <br>
<em>placeholder</em> <br> 1. Placeholder <br> 2. Placeholder<br>
</p>
<button>Placeholder</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
PH2
</li>
<li class="menu-item">
PH3
</li>
<li class="menu-item">
PH4
</li>
</ul>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

Press f12 go to Developer mode, check the console.if there has questions,solve them.
You can Single-step debugging in the source page,Network interaction in the network page

Why is my anchor behaving differently after I click it the second time?

When I load up the website and click on Wir über uns it doesn't scroll down as much as when I click the button again (after scrolling up). It should scroll down to the start of the section and the picture in the first section should not be visible when it scrolls you down to the second section (like it does when you click it a second time)
https://jsfiddle.net/HcJanni/z2dLnfca/
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<!-- Navigation -->
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<img src="https://i.postimg.cc/przxCGcx/Logo.png">
<ul>
<li class="hvr-sweep-to-top active">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</nav>
<!-- body -->
<div id="spacer"></div>
<!-- home section -->
<section id="home" class="section">
<div>
<img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild">
</div>
</section>
<!-- UberUns section -->
<section id="wir-ueber-uns" class="section">
<div>
<p>section 2</p>
</div>
</section>
<!-- Aktionen section -->
<div id="reference"></div>
<section id="aktionen" class="section">
<div>
<p>section 3</p>
</div>
</section>
<!-- Terminvereinbarung section -->
<section id="terminvereinbarung" class="section">
<div>
<p>section 4</p>
</div>
</section>
<!-- Infos section -->
<section id="infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
width: 1280px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
body {
background-color: white;
margin: 128px 0 0 0;
}
/* Navigation */
#navlinks {
margin: 0;
}
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 30px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
top: 0;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 1.2rem;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar img {
height: 128px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink img {
height: 80px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin: auto;
}
/* fixed nav Ende */
/*
#spacer {
height: 128px;
border-bottom: 4px solid;
}
margin-top: 0 !important;
*/
#home {
height: 100% !important;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -1;
position: relative;
top: -80px;
}
#wir-ueber-uns {
height: 50px;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -2;
background-color: lightblue;
position: relative;
top: -80px;
}
#aktionen {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -3;
background-color: blue;
position: relative;
top: -80px;
}
#terminvereinbarung {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -4;
background-color: red;
position: relative;
top: -80px;
}
#infos {
height: 100%;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -5;
background-color: yellow;
position: relative;
top: -80px;
}
#logo {
margin-left: 50px;
}
#homebild {
width: 100%;
height: 100%;
}
#impressum {
background-color: darkgreen;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//

When your page is first loaded you have a negative margin of set on #home
#home {
height: 100% !important;
display: block;
margin-top: -80px;
padding-top: 80px;
z-index: -1;
position: relative;
top: -80px;
}
When you start scrolling you change this margin. However you do not reset the margin to -80px when scrolling back to the top again which will result in you getting different result when the page first loaded and the second time you click the button.

Hamburger menu + shrinking header

I was advised to repost my question, as I did not phrase it correctly previously.
I have a hamburger menu (see here: http://codepen.io/Dingerzat/pen/zKXARr ), that I want to work with a shrinking header (see here: http://codepen.io/Nickies/pen/ZYwJZM ). Putting the two codes directly together hasn't worked. The shrinking header and resizing logo ceases to function on scrolling.
I am not sure what is causing this. Any advice would be brilliant.
Posting the code my combined version below:
HTML
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: center;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}
header.smaller nav a {
line-height: 75px;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();

Hamburger menu with shrinking header

I want to merge a menu I have been working on with a shrinking header (though i want the hamburger to stay the same size).
I have tried directly merging piece of I found of a shrinking header with my hamburger menu, though there are conflicts where the overlay goes behind the header. Also can't get the logo text to be central, or get the bar itself to resize.
Here is my attempt: http://codepen.io/Dingerzat/pen/XjQQWZ
And here is the previous and working version of the menu: http://codepen.io/Dingerzat/pen/zKXARr
Any help would be great.
HTML
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: center;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}
header.smaller nav a {
line-height: 75px;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();

Categories