Active navigation bar with main content - javascript

I have a problem with my active navigation bar. When I open the hamburger menu than the main content stay fixed and does not moving with the open navigation menu. I was looking on the internet, but i did not find something what can help me or how to solve it. I am sending here my code. If anycone can help with this i will be happy. What can i do? How to repair it?
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nihil corporis ut praesentium accusantium possimus molestiae reprehenderit quam nostrum distinctio repudiandae iure aliquam repellat unde recusandae quas ipsam. Dicta animi.</p>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
font-size: 100%;
}
/* NAVIGATION */
header {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25em 6.25em;
border-bottom: 1px solid #000;
}
.logo {
width: 50%;
}
.hamburger {
display: none;
}
.nav-bar ul {
display: flex;
}
.nav-bar ul li a {
display: block;
color: #000;
font-size: 1.375em;
padding: 0.4545454545454545em 0.6818181818181818em;
border-radius: 50px;
transition: all 0.5s ease-in-out;
margin: 0 0.2272727272727273em;
}
.nav-bar ul li a:hover {
color: #fff;
background: #ffb038;
}
.fa-solid {
margin-right: 0.6818181818181818em;
vertical-align: middle;
}
#media only screen and (max-width: 1770px) {
.nav-bar ul li a i {
display: block;
}
}
#media only screen and (max-width: 1400px) {
header {
padding: 0px 1.5625em;
}
.hamburger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.lines {
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before {
transform: translateY(-16px);
}
.lines::after {
transform: translateY(16px);
}
.hamburger.open .lines {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .lines::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .lines::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.nav-bar {
height: 0;
position: absolute;
top: 65px;
left: 0;
right: 0;
width: 100vw;
background: #ffb038;
transition: 0.5s;
overflow: hidden;
}
.nav-bar.active {
height: 28.125em;
transition: all 0.5s ease-in-out;
margin-top: 15px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 5em auto 0 auto;
text-align: center;
transition: all 0.5s ease-in-out;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
display: block;
}
.nav-bar ul li a {
margin-bottom: 0.75em;
}
.nav-bar ul li a:hover {
color: #000;
background: white;
}
}


In your media-query you are taking .nav-bar out of the flow with position: absolute, meaning it cannot affect e.g. main.
Adding a wrapper around .logo and .hamburger allows us to keep .nav-bar as its sibling in the flow:
<!--Before:-->
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
<!--After:-->
<header>
<div><!--The wrapper-->
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
</div>
<nav class="nav-bar"><!--...--></nav>
</header>
This wrapper will replace before's header in terms of CSS. The result may look like this:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar:not(.active) {
height: 0;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
height: 48px;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
/*Wrapper (styled as before's header) - Mobile style*/
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
/*Default style*/
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper"><!--New wrapper-->
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>
To effectively transition height property, you can transition max-height. You may want to use custom properties:
const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navBar.classList.toggle("active"));
// Example of setting `--links` property:
navBar.style.setProperty("--links", navBar.querySelectorAll("a").length);
.nav-bar {
--links: 3; /*Example of setting `--links` property*/
--link-height: 48px;
max-height: calc(var(--links, 0) * var(--link-height));
transition: max-height .25s ease;
}
.nav-bar:not(.active) {
max-height: 0;
}
.nav-bar a {
height: var(--link-height);
}
/*Remove `height` declarations from .nav-bar and related; otherwise same as before:*/
.nav-bar {
width: 100%;
background: #ffb038;
overflow: hidden;
}
.nav-bar a {
padding: 0.5em 0.7em;
width: 100%;
display: inline-block;
box-sizing: border-box;
font-size: 1.375em;
text-align: center;
}
#wrapper {
padding: 0px 1.5625em;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: sans-serif;
color: black;
}
.hamburger {
width: 80px;
height: 80px;
background-color: orange;
cursor: pointer;
}
<body>
<header>
<div id="wrapper">
<div class="logo">Logo</div>
<div class="hamburger"></div>
</div>
<nav class="nav-bar" style="--links:3"><!--Example of setting `--links` property-->
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
<main>
Lorem ipsum set amet.
</main>
</body>

Related

responsive navbar stacked with the content

i've got a problem that the navbar was stacked with the content. Does Anyone know How to fix the nav-bar? and why the navbar is stacked, help me. i was try to fix it with z-index but not working... plz help me, i was frustated. i want the navbar is not stacked and the background is #fff.
stacked image
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: 40vh;
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 100px;
flex-direction: column;
align-items: center;
z-index: 3;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>

Hello Please use below css. I have made changes only css file. Hope it may helpful to you.
const burger = document.querySelector('.burger');
let nav = document.querySelector('.menu ul')
burger.addEventListener('click', function () {
this.classList.toggle('change');
nav.classList.toggle('open');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-size: 18px;
transition: .5s;
}
:root {
--body-color: #fff;
--main-color: #1c1c3c;
--text-color: #fff;
--red-color: #800000;
--semi-white: #ccc;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.body{
background-position:center;
background-size:cover;
background-repeat: no-repeat;
height:100vh;
}
/*Nav And Header*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
align-items: center;
background:#fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
z-index: 1;
}
.logo {
font-size: 1.5em;
color: var(--main-color);
font-weight: 500;
letter-spacing: 1px;
}
.flex {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--main-color);
}
header ul li a:hover {
transition: .5s;
font-size: 18px;
font-weight: 525;
color: var(--red-color);
}
header ul li a::before {
content: '';
position: absolute;
width: 100%;
bottom: -3px;
height: 3px;
background-color: #800000;
transform: scaleX(0);
transition: transform .3s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/*Hamburger Setting*/
.burger {
position: relative;
display: none;
cursor: pointer;
z-index: 2;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
border-radius: 5px;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
background-color: var(--red-color);
}
.change .bar2 {
opacity: 0;
background-color: var(--red-color);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: var(--red-color);
}
/*TextBox code*/
.text-box {
width: 90%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1,
.text-box span {
color: var(--main-color);
font-size: 46px;
}
.red-btn {
text-decoration: none;
font-family: 'Rubik', sans-serif;
color: var(--main-color);
margin: 5px auto;
padding: 15px 34px;
font-size: 17px;
background: var(--body-color);
border: 1px solid var(--red-color);
position: relative;
cursor: pointer;
border-radius: 25px;
}
.red-btn:hover{
background: var(--red-color);
color: var(--text-color);
}
/*Code Of Dashboard*/
/*This is responsive code*/
#media(max-width:920px) {
.text-box h1 {
font-size: 190%;
}
.text-box p {
margin: 20px 0 20px;
font-size: 16px;
font-weight: 500;
color: var(--main-color);
}
.menu ul {
position: absolute;
height: calc(100vh - 80px);
top: 100%;
width: 100%;
background-color:#fff;
justify-content: space-evenly;
padding: auto;
top: 80px;
flex-direction: column;
align-items: center;
z-index: 3;
visibility: hidden;
}
.burger {
position: relative;
display: block;
cursor: pointer;
z-index: 2;
}
.menu ul.open {
position: fixed;
opacity: 5;
visibility:visible;
left:0;
z-index: 99;
transition: 1s;
overflow: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>BeHealthy.com</title>
</head>
<body>
<header>
<a href="#"><img src="" alt="logo" style="width: 55px;">
<p style="float: right; padding: 22px 0 ;" class="logo"> Lo<span
style="color:#800000 ;font-size:1em; font-weight: 500;">go</span></p>
</a>
<div class="flex">
<div class="menu">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Artikel</li>
<li>Konsultasi</li>
</ul>
</div>
<div class="icon">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</header>
<div class="body">
<div class="text-box">
<h1>Lorem <span style="color: #800000;font-size: 100%;">Ipsum!</span>
<h1>
<p><b>Healthy First!</b>,Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium culpa debitis porro, neque consequatur, est quisquam nisi explicabo error, nostrum iste id. Incidunt, laudantium rem totam nisi itaque aperiam amet?
</b>BeHealthy<b>.</p>
<span style="font-size:18px;font-weight:550;">#StayHealthy</span>
<br>
this is button
</div>
</div>
</body>
</html>

Responsive Navigation Hamburger Menu not working

I'm trying to make my navigation responsive but when i tried to resize my window, my hamburger doesn't allow the dropdown function to work. I took both the navigation and responsive hamburger online so is there somewhere that might be overwriting the hamburger ?
This is my HTML
<header>
<div class="logo">
<p>LEGEND</p>
<div class= "hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
This is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a, button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
This is my css when it's responsive
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-botton: 12px;
}
}
This is my javascript
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onClick = function() {
navBar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
}
</script>

UPDATE
I revised the solution so that the 2 blocks are for:
In small screen but active is not on
In small screen and active is on
This separation protects the style from broken when transition happen as active toggles.
More styles can be added to the first block to define how this list should look like, such as making it display the list in column.
Example:
.nav-bar ul {
display: flex;
flex-direction: column;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
Original
This is because your JS code has some syntax error. Here is what to do:
Use const to declare hamburger and navbar.
Call addEventListener on hamburger to add the function for toggling class of navbar
Follow the below example to revise your code, or visit a live demo of it fixed here: codepen
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
Hope this solution will help.

Your code has nothing wrong, just few typos in your JavaScript:
You have onClick instead of onclick
navbar instead of navBar at navbar.classList.toggle("active")
Corrected version
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
Extra (Change display: block; to display: grid; in .nav-bar ul selector in CSS media query to display dropdown in vertical list)
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Better Solution
Quote from MDN Web Docs, as in this link:
The recommended mechanism for adding event handlers in web pages is the addEventListener() method
You may use addEventListener() to achieve the same result:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Alternate Solution
For readers who are more familiar to add() / remove(), here's some alternatives:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>

I want to add a section under a video section but it doesn't align perfectly under the first section. How can I solve this?

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.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: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<title>Think Tank</title>
</html>
<head>
</head>
<body>
<style>
#import url('styles.css');
</style>
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="webasset.mov" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="image/img one.jpg">
</div>
</div>
</div>
<!--===== MAIN JS =====-->
<script src="main.js"></script>
</body>
</html>

.showcase {
position: relative;
}
Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.

--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero-section-wrapper {
position: relative;
height: 100vh;
display: table;
width: 100%;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #000000;
transition: 0.5s;
color: #ffff;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.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: #0394f4;
mix-blend-mode: overlay;
color: #001540;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 2.5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 5em;
font-weight: 700;
color: #64A8F0;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000026;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #ffff;
}
.menu ul li a:hover
{
color: #64A8F0;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin:auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding:12px 40px;
text-decoration: none;
color:#fff;
font-size: 25px;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
#media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 1.5em;
}
.text h3
{
font-size: 3em;
}
<div class="hero-section-wrapper">
<section class="showcase">
<header>
<h2 class="logo"></h2>
<div class="toggle"></div>
</header>
<video src="Video/video.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Willkommen auf </h2>
<h3>Think Tank</h3>
<p>Beispiel.</p>
THINK kaufen
</div>
<ul class="social">
<li><img src="https://i.ibb.co/x7P24fL/facebook.png"></li>
<li><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></li>
<li><img src="https://i.ibb.co/ySwtH4B/instagram.png"></li>
</ul>
</section>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Unser Token</li>
<li>NFT (COMING SOON)</li>
<li>Das Team</li>
<li>Kontakt</li>
</ul>
</div>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="button">
Read More
</div>
</div>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="image-section">
<img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
</div>

div taking properties from each other in html error

I'm trying to make a portfolio page, using HTML, CSS & JS.
Encountered a weird error. The CSS styling that I have performed on one div is somehow also getting on another div. And the weird part is that, the second div responds to its own styling along with the first ones....It will be more clear from the code
$(document).ready(function () {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
*{
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
width: 100%;
z-index: 999;
position:fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky{
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span{
color: cyan
}
.navbar.sticky .logo a span{
color: white;
transition: all 0.3s ease;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: white;
}
/* menu button styling */
.menu-btn{
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home{
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width{
margin: auto 0 auto 40px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px, 0 ;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section{
padding: 100px 0;
}
.about{
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after{
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span{
color: white;
}
.about .about-content .right .lorem{
color: black;
background: none;
}
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px){
.home .max-width{
margin-left: 0px;
}
}
#media(max-width: 991px){
.max-width{
padding: 0 50px;
}
}
#media(max-width: 947px){
.menu-btn{
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu{
position: fixed;
height:100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin:20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
}
#media(max-width: 690px){
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
#media(max-width: 500px){
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li><a href="#">About</li>
<li><a href="#">Skills</li>
<li><a href=#>Projects</li>
<li><a href=#>Experience</li>
<li><a href="#">Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
cumque
doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
atque
rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
adipisci
cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
In the About section only the Resume Button is to be highlted but the entire colum right div is somehow affected. When I ran just the About section part, everything worked well. But when I run the whole file the same error pops up. I've tried removing the lorem part from div and put in and try, still the same error pops up. The same part is somehow referenced to the above the navbar as well, cause when clicked upon it shifts to the navbar. Please look into this.

The error is occurring because you did not close the anchor tags in your menu,
change it to this
<ul class="menu">
<li>Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>

You have this styling in the about section:
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
That is, every anchor link in the about right part is styled that way - with a crimson background (which changes to crimson text and no background on hover).
Because the anchor tags are not closed in your menu you have anchor tags open (nested anchor tags aren't legal HTML BTW) and it seems the browser is doing its best to understand these open anchor tags. By the time you get to the about section right hand side it still thinks there's an anchor tag (at least, in my Edge on Windows 10 that's what it had put there when I used the dev tools inspect facility to check the actual HTML it's trying to interpret). So it picks up the crimson styling.
Here's the snippet with the anchor tags in the menu closed and the text part of the resume does not have that crimson background:
$(document).ready(function() {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
* {
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar {
width: 100%;
z-index: 999;
position: fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky {
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span {
color: cyan
}
.navbar.sticky .logo a span {
color: white;
transition: all 0.3s ease;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
.navbar.sticky .menu li a:hover {
color: white;
}
/* menu button styling */
.menu-btn {
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home {
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px, 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section {
padding: 100px 0;
}
.about {
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after {
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span {
color: white;
}
.about .about-content .right .lorem {
color: black;
background: none;
}
.about .about-content .column a {
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px) {
.home .max-width {
margin-left: 0px;
}
}
#media(max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media(max-width: 947px) {
.menu-btn {
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before {
content: "\f00d";
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
}
#media(max-width: 690px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
#media(max-width: 500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms &amp Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

Categories

Resources