Slide In/Out Navigation - javascript

I have created a slide in/out side navigation for my website. It works fine as it is just now, but I was hoping to get the site to move over with the sidebar (similar to this: http://demo.agnidesigns.com/fortune/demo15/). Currently it just moves out over the site.
I thought maybe I could add a toggle classList function which would move the sections left to the same width as the sidebar (left: 280px), but can't quite understand how to include that in the JS. However I am certain it will be a similar method to my existing JS for the side navigation toggle.
<nav>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
</ul>
</div>
</nav>
<section class="section-overview new-section__whitetwothird" id="overview">
<div class="row">
<h2>Some Text</h2>
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 7px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
.new-section__whitetwothird {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
min-height: 66.66vh;
width: calc(100vw - 80px);
left: 80px;
}
#sidebar {
position: fixed;
width: 200px;
height: 100vh;
background: #000;
left: -200px;
transition: 0.4s;
z-index: 1;
}
#sidebar.active {
left: 0;
z-index: 1;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 20px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
#sidebar .toggle-btn {
position: absolute;
left: 200px;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
color: #fff;
}
JS
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('active');
}
https://codepen.io/caitlinmooneyx/pen/BEpBzZ
I was curious if I would have to create a new function or can I extend my toggleSidebar with an else if?
I have tried adding a toggleSection() to the section but as the sidebar is already hooked up to another function it just stops working altogether, as well as trying to add a .section.active class (as I was trying to recreate the same thing as #sidebar.active:
.section.active {
left: 280px;
}
Essentially the left: 280px is what I'm trying to make happen when the sidebar is opened/active.
Please excuse me if this looks silly, I am new to JS and still learning how things work, and cannot find anything online regarding what I'm trying to achieve.


You can simply add onto the existing toggleSidebar() function offsetting the content by adding a left property to the new .new-section__whitetwothird--active class ( you can amend the class name to better fit your project)
Update: I have added a querySelectorAll and a loop to add the class in the event where there are multiple classes with the same name on one page ( my previous answer was just querySelector) there are endless ways to add a loop I chose the older way rather than a newer version for better browser support.
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
var sections = document.querySelectorAll(".new-section__whitetwothird"),i;
for (i = 0; i < sections.length; ++i) {
sections[i].classList.toggle("new-section__whitetwothird--active");
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 7px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
.new-section__whitetwothird {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
min-height: 66.66vh;
width: calc(100vw - 80px);
left: 80px;
transition:.5s ease;
}
.new-section__whitetwothird--active {
left:280px;
}
#sidebar {
position: fixed;
width: 200px;
height: 100vh;
background: #000;
left: -200px;
transition: 0.4s;
z-index: 1;
}
#sidebar.active {
left: 0;
z-index: 1;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 20px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
#sidebar .toggle-btn {
position: absolute;
left: 200px;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
color: #fff;
}
<nav>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<section class="section-overview new-section__whitetwothird" id="overview">
<div class="row">
<h2>Some Text</h2>
</div>
</section>


By just re-arranging some of your html and adding some new lines, this is what I got.
This is how I changed your html
<!--I created a main content wrapper and its height and width is the viewport-->
<main>
<nav>
<!--I placed the toggle btn here -->
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<div id="sidebar">
<!--This is where the toggle button before -->
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<!-- I created this main section wrapper that will hold all the sections-->
<div class="section-wrapper">
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
</div>
</main>
And these are the changes to the css
.section-wrapper {
position: relative;
overflow-y: scroll; // will create the scrollbar if it overflows
transition: transform .5s ease;
margin-left: 80px;
}
// instead of targeting the #sidebar, I targeted the nav
nav.active {
width: 360px;
}
nav.active+.section-wrapper {
transform: translateX(280px); // this will push the sections to the right
}
All in all, I just replace some padding and margin properties to your css.
And in your javascript, I simply replaced the targeted element to nav
And the result will be this
function toggleSidebar() {
document.querySelector('nav').classList.toggle('active');
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
main {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
}
.section-wrapper {
position: relative;
overflow-y: scroll;
transition: transform .5s ease;
margin-left: 80px;
}
section {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
}
nav {
width: 80px;
background: #000;
overflow:hidden;
transition: all .5s ease;
position: absolute;
left: 0;
}
nav.active {
width: 360px;
}
nav.active+.section-wrapper {
transform: translateX(280px);
}
#sidebar {
position: relative;
width: 180px;
height: 100vh;
left: -200px;
transition: 0.4s;
z-index: 2;
margin-right: 80px;
padding: 20px;
}
nav.active #sidebar {
left: 0;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#sidebar li {
list-style: none;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 10px;
font-size: 14px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
.toggle-btn {
width: 80px;
position: absolute;
right: 0;
z-index: 1;
border-left: 1px solid #1a1a1a;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
font-size: 7px;;
color: #fff;
}
<main>
<nav>
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<div id="sidebar">
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<div class="section-wrapper">
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 4</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil inventore porro illum, numquam expedita debitis veritatis quod? Inventore, optio. Vitae nihil consequatur error provident in, maxime earum dolores rerum aliquam sed magnam quibusdam harum nam. Modi rem eligendi saepe, atque sequi similique itaque voluptas a illum, placeat mollitia obcaecati praesentium? </p>
</div>
</section>
</div>
</main>
By the way this is the pen I forked. I hope it helps https://codepen.io/anon/pen/JVEYQM

Related

Active navigation bar with main content

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>

Issue with switching images using ajax

I'm having issues with the switching of images for a website I'm making. The intended outcome is that when you click the different colored circles, it changes the image (displaying the product with the corresponding image), however, for some reason nothing happens when clicking the circles. Any help would be appreciated.
Codepen link: https://codepen.io/StuartGroom/pen/ZExoJKw
HTML
<main>
<div class = "productCustomiseContainer">
<!--left column/ image-->
<div class ="leftColumn">
<img data-image="black" src="images/blackProduct1.png" alt="">
<img data-image="white" src="images/whiteProduct2.png" alt="">
<img data-image="green" src="images/greenProduct1.png" alt="">
<img data-image="pink" class="active" src="images/pinkProduct1.png" alt="">
</div>
<!--right column-->
<div class ="rightColumn">
<div class= "productDescription">
<span>Personal Safety Alarm</span>
<h1>WatchU</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni veritatis dolorem blanditiis unde tenetur aperiam tempore pariatur, nesciunt neque molestiae quo sunt culpa hic ipsum ex dolor accusamus nobis!</p>
</div>
<!-- product configuartion-->
<div class="productConfig">
<!-- product colour-->
<div class="productColour">
<span>Select Colour</span>
<div class="colourChoose">
<div>
<input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
<label for="pink"><span></span></label>
</div>
<div>
<input data-image="green" type="radio" id="green" name="color" value="green">
<label for="green"><span></span></label>
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white">
<label for="white"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
</div>
<div class="productPrice">
<span>£10</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="product.js" charset="utf-8"></script>
</div>
</div>
</main>
CSS
main .productCustomise {
width: 100vw;
height: 100vh;
background-color: blue;
}
.productCustomiseContainer{
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
height: 700px;
}
.leftColumn{
width: 65%;
position: relative;
}
.rightColumn{
width: 35%;
margin-top: 50px;
}
/* left column */
.leftColumn img{
width:100%;
position:absolute;
left: 0;
top:0;
opacity: 0;
transition: all 0.3s ease;
}
.leftColumn img{
opacity: 1;
}
/* right column */
.rightColumn .productDescription{
border-bottom: 1px solid red;
margin-bottom: 20px;
}
.rightColumn .productDescription span{
font-size: 18px;
color: black;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.rightColumn .productDescription h1{
font-weight: 300;
font-size: 52px;
color: grey;
line-height: 2px;
}
.rightColumn .productDescription p{
font-weight: 300;
font-size: 16px;
color: grey;
line-height: 24px;
}
/* prodcut configuration*/
.productColour span{
font-weight: 300;
font-size: 16px;
color: grey;
margin-bottom: 20px;
display: inline-block;
}
/* product colour */
.productColour{
margin-bottom: 30px;
}
.colourChoose div{
display: inline-block;
}
.colourChoose input[type="radio"]{
display:none;
}
.colourChoose input[type="radio"] + label span{
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.colourChoose input[type="radio"] + label span{
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
.colourChoose input[type="radio"]#pink + label span {
background-color: pink;
}
.colourChoose input[type="radio"]#green + label span {
background-color: green;
}
.colourChoose input[type="radio"]#white + label span {
background-color: white;
}
.colourChoose input[type="radio"]#black + label span {
background-color: black;
}
.colourChoose input[type="radio"]:checked + label span{
background-image: url(images/check-solid.svg);
background-repeat: no-repeat;
background-position: center;
}
/* product price*/
.productPrice{
display: flex;
align-items: center;
}
.productPrice span{
font-size: 26px;
font-weight: 300;
color: black;
margin-right: 20px;
}
/* responsive*/
#media (max-width: 940px){
.productCustomiseContainer{
flex-direction: column;
margin-top: 60px;
}
.leftColumn, .rightColumn{
width: 100%;
}
.leftColumn img {
width: 300px;
right: 0;
top:-65px;
left:initial;
}
}
#media (max-width: 535px){
.leftColumn img{
width: 220px;
top: -85px;
}
}
Javascript
$(document).ready(function() {
$('.colourChoose input').on('click', function() {
var productColour = $(this).attr('data-image');
$('.active').removeClass('active');
$('.leftColumn img[data-image = ' + productColour + ']').addClass('active');
$(this).addClass('active');
});
});

added some styles because of the images are not shown. add active class to following css like.
.leftColumn img.active{
opacity: 1;
}
$(document).ready(function() {
$('.colourChoose input').on('click', function() {
var productColour = $(this).attr('data-image');
$('.active').removeClass('active');
$('.leftColumn img[data-image=' + productColour + ']').addClass('active');
$(this).addClass('active');
});
});
main .productCustomise {
width: 100vw;
height: 100vh;
background-color: blue;
}
.productCustomiseContainer {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
height: 700px;
}
.leftColumn {
width: 65%;
position: relative;
}
.rightColumn {
width: 35%;
margin-top: 50px;
}
/* left column */
.leftColumn img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.3s ease;
}
.leftColumn img.active {
opacity: 1;
}
/* right column */
.rightColumn .productDescription {
border-bottom: 1px solid red;
margin-bottom: 20px;
}
.rightColumn .productDescription span {
font-size: 18px;
color: black;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.rightColumn .productDescription h1 {
font-weight: 300;
font-size: 52px;
color: grey;
line-height: 2px;
}
.rightColumn .productDescription p {
font-weight: 300;
font-size: 16px;
color: grey;
line-height: 24px;
}
/* prodcut configuration*/
.productColour span {
font-weight: 300;
font-size: 16px;
color: grey;
margin-bottom: 20px;
display: inline-block;
}
/* product colour */
.productColour {
margin-bottom: 30px;
}
.colourChoose div {
display: inline-block;
}
.colourChoose input[type="radio"] {
display: none;
}
.colourChoose input[type="radio"]+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.colourChoose input[type="radio"]+label span {
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
}
.colourChoose input[type="radio"]#pink+label span {
background-color: pink;
}
.colourChoose input[type="radio"]#green+label span {
background-color: green;
}
.colourChoose input[type="radio"]#white+label span {
background-color: white;
}
.colourChoose input[type="radio"]#black+label span {
background-color: black;
}
.colourChoose input[type="radio"]:checked+label span {
background-image: url(images/check-solid.svg);
background-repeat: no-repeat;
background-position: center;
}
/* product price*/
.productPrice {
display: flex;
align-items: center;
}
.productPrice span {
font-size: 26px;
font-weight: 300;
color: black;
margin-right: 20px;
}
/* responsive*/
#media (max-width: 940px) {
.productCustomiseContainer {
flex-direction: column;
margin-top: 60px;
}
.leftColumn,
.rightColumn {
width: 100%;
}
.leftColumn img {
width: 300px;
right: 0;
top: -65px;
left: initial;
}
}
#media (max-width: 535px) {
.leftColumn img {
width: 220px;
top: -85px;
}
}
<main>
<div class="productCustomiseContainer">
<!--left column/ image-->
<div class="leftColumn">
<img data-image="black" src="images/blackProduct1.png" alt="" style="background:black;height:300px">
<img data-image="white" src="images/whiteProduct2.png" alt="" style="background:whitesmoke;height:300px">
<img data-image="green" src="images/greenProduct1.png" alt="" style="background:green;height:300px">
<img data-image="pink" class="active" src="images/pinkProduct1.png" alt="" style="background:pink;height:300px">
</div>
<!--right column-->
<div class="rightColumn">
<div class="productDescription">
<span>Personal Safety Alarm</span>
<h1>WatchU</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni veritatis dolorem blanditiis unde tenetur aperiam tempore pariatur, nesciunt neque molestiae quo sunt culpa hic ipsum ex dolor accusamus nobis!</p>
</div>
<!-- product configuartion-->
<div class="productConfig">
<!-- product colour-->
<div class="productColour">
<span>Select Colour</span>
<div class="colourChoose">
<div>
<input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
<label for="pink"><span></span></label>
</div>
<div>
<input data-image="green" type="radio" id="green" name="color" value="green">
<label for="green"><span></span></label>
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white">
<label for="white"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
</div>
<div class="productPrice">
<span>£10</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="product.js" charset="utf-8"></script>
</div>
</div>
</main>

Removing footer in HTML/CSS

I have this code:
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: absolute;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Freelancer</h3>
<div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
</div>
</li>
</ul>
</div>
</div>
If you run the code, and open it on new page, there is a different background at the end of the page, I would like to remove that and merge it with the dark background I have. How can I extend the dar background to the full page? I would just like the blueish background near the end of the page to be removed.
Edit: enter image description here

You can set the overflow-y on the body to scroll and still use the fixed background
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
overflow-y: scroll;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: fixed;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<body>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
</ul>
</div>
</div>
</body>

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>

Text interfering with the navbar when scrolling down

Hello! I'm still new to web development, and I really need help with this one. When scrolling down, the text interferes with my navbar for some reason, I tried every position I can think of. I think it has to do with margin, but I don't really know. I posted the code for you guys to help me. Thank you to everyone who wants to help!
function 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 + 0.5}s`;b
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap');
.background{
width: 100%;
height: 100vh;
background-image:
linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
url(/images/beachpic.jpeg);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5D4954;
font-family: "Poppins", sans-serif;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
font-family: 'Poppins', sans-serif;;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5D4954;
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
position: relative;
height: 70px;
}
.link::after{
content: '';
display: block;
width: 0;
height: 2px;
background: #fbfcfd;
transition: width .3s;
}
.link:hover::after{
width: 100%;
transition: width .3s;
}
.header{
width: 100%;
background-color:rgba(0, 0, 0,0.5)
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
}
.header ul li a{
display: block;
text-decoration: none;
text-transform: uppercase;
color:white;
font-size: 100%;
letter-spacing: 2px;
font-weight: 600;
padding: 25px;
transition: width .3s;
}
.content{
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
z-index: 2;
}
.heading1{
font-size: 70px;
margin-bottom: 10px 0 30px;
background:transparent;
position: relative;
animation: text 5s 1;
}
#keyframes text{
0%{
color: transparent;
margin-bottom: -40px;
}
30%{
letter-spacing: 4px;
margin-bottom: -40px;
}
85%{
letter-spacing: 3px%;
margin-bottom: -40px;
}
}
.welcome{
font-size: 30px;
position: relative;
}
<head>
<link rel="stylesheet" href="home.css">
</head>
<header class="site-header"></header>
<div class="background">
<div class="nav">
<img src="/images/logo.png" alt="" class="logo">
<ul class="nav-links">
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<p style="font-size: 1px;">قيل قديقال</p>
<div class="content">
<small class="welcome">Welcome to</small>
<h1 class="heading1">H2O <br>Tech<br>Solutions</h1>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="font-size: 1px;">قيل قديقال</p>
<div class="container">
<h1>About Us</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
<script src="script.js"></script>

Add z-index: 3; to .nav:
function 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 + 0.5}s`;b
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap');
.background{
width: 100%;
height: 100vh;
background-image:
linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
url(/images/beachpic.jpeg);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
position: fixed;
z-index: 3;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5D4954;
font-family: "Poppins", sans-serif;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
font-family: 'Poppins', sans-serif;;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5D4954;
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
position: relative;
height: 70px;
}
.link::after{
content: '';
display: block;
width: 0;
height: 2px;
background: #fbfcfd;
transition: width .3s;
}
.link:hover::after{
width: 100%;
transition: width .3s;
}
.header{
width: 100%;
background-color:rgba(0, 0, 0,0.5)
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
}
.header ul li a{
display: block;
text-decoration: none;
text-transform: uppercase;
color:white;
font-size: 100%;
letter-spacing: 2px;
font-weight: 600;
padding: 25px;
transition: width .3s;
}
.content{
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
z-index: 2;
}
.heading1{
font-size: 70px;
margin-bottom: 10px 0 30px;
background:transparent;
position: relative;
animation: text 5s 1;
}
#keyframes text{
0%{
color: transparent;
margin-bottom: -40px;
}
30%{
letter-spacing: 4px;
margin-bottom: -40px;
}
85%{
letter-spacing: 3px%;
margin-bottom: -40px;
}
}
.welcome{
font-size: 30px;
position: relative;
}
<head>
<link rel="stylesheet" href="home.css">
</head>
<header class="site-header"></header>
<div class="background">
<div class="nav">
<img src="/images/logo.png" alt="" class="logo">
<ul class="nav-links">
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<p style="font-size: 1px;">قيل قديقال</p>
<div class="content">
<small class="welcome">Welcome to</small>
<h1 class="heading1">H2O <br>Tech<br>Solutions</h1>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="font-size: 1px;">قيل قديقال</p>
<div class="container">
<h1>About Us</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
<script src="script.js"></script>

Try giving the navigation bar a higher z-index, than the content.
From CSS-Tricks:
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only affects elements that have a position
value other than static (the default).

Categories

Resources