I'm trying to figure out how to get this sidebar to work, but when I open it via the hamburger menu in a smaller screen, the sidebar opens underneath the content. How can I fix this? I tried following a tutorial to create this sidebar, but apparently I messed something up when I tried adding my own stuff and I'm not sure what to do. I've been playing around with elements in CSS, but it still comes out the same way.
Screenshot of sidebar issue
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Fire Sans", sans-serif;
}
.app {
display: flex;
min-height: 100vh;
background-image: url(../site/images/bg2.jpeg);
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #053853;
}
.sidebar h3 {
color: #f6da9b;
font-size: 0.75 rem;
text-transform: uppercase;
margin-bottom: 0.5em;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2 linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: #3bba9c;
border-right: 5px solid #3bba9c;
}
.content {
flex: 1 1 0;
padding: 2rem;
margin: 4rem;
width: 60%;
border: 3px solid #e9d397;
text-align: center;
border-radius: 10px;
backdrop-filter: blur(10px);
}
.content h1 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.content p {
color: #fff;
}
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #2e3047;
cursor: pointer;
}
.hamburger {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: 0.25s;
}
.hamburger > span::before {
content: "";
top: -8px;
}
.hamburger > span::after {
content: "";
top: 8px;
}
.menu-toggle.is-active .hamburger > span {
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after {
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px) {
.sidebar {
max-width: 200px;
}
}
#media (max-width: 768px) {
.menu-toggle {
display: block;
}
.content {
padding: 2rem;
margin-top: 8rem;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2 linear;
}
.sidebar.is-active {
left: 0;
}
}
<!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">
<title>Responsive Sidebar</title>
<link rel="stylesheet" href="style3.css" />
</head>
<body>
<div class="app">
<div class="menu-toggle">
<div class="hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Javascript</h3>
<nav class="menu">
Home
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
</nav>
</aside>
<main class="content">
<h1>Welcome, Human!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquid impedit tenetur nam, vitae fugiat doloremque ut incidunt inventore quam qui laboriosam! Esse recusandae a inventore aliquam! Distinctio, expedita hic?</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Can you try giving your sidebar a higher z-index than the content?
.sidebar {
z-index: 2;
}
.content {
z-index: 1;
}
Related
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>
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>
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>
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).
So I have a function that changes the background color of the header every time a nav link is clicked. I have a setTimeout function within that function that holds that color for 2s before changing it back to the background image. The bug I have is that I can just keep clicking a nav button and keep changing the color which messes up the timing. Its important that that color stays the same for 2s before changing back to an image. Then after the timeout has ran the user can change the color again. I've tried using a boolen to check if there already is a color but I can't get it to work.
const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links div'));
const header = document.querySelector('header');
const form = document.querySelector('form');
const hamMenu = document.querySelector('.ham-menu');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i < 6; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
if(!hasColor) {
header.style.backgroundImage = 'none';
header.style.backgroundColor = hexColor;
}
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML];
}
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('.name').value;
const address = document.querySelector('.address').value;
const city = document.querySelector('.city').value;
const dialog = document.querySelector('.dialog-wrap');
const close = document.querySelector('.close');
dialog.style.display = 'block';
document.querySelector('.dialog-name').innerHTML = name;
document.querySelector('.dialog-address').innerHTML = address;
document.querySelector('.dialog-city').innerHTML = city;
close.onclick = () => {
dialog.style.display = 'none';
document.querySelector("form").reset();
}
})
hamMenu.addEventListener('click', () => {
const nav = document.querySelector('nav');
nav.classList.toggle('ham-open');
})
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5);
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
position: relative;
z-index: 5;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 16px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
.ham-menu {
display: none;
}
/*-----HEADER-----*/
header {
background-image: url(img/canada.jpeg);
background-position: center;
background-size: cover;
height: 80vh;
margin-top: 92px;
}
.header-info {
display: inline-block;
color: #fff;
font-size: 1.8rem;
background-color: rgba(0,0,0,0.6);
padding: 35px;
margin-left: 10%;
margin-top: 4%;
}
header p {
margin: 0;
padding: 0;
}
header p:first-child {
margin-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0 40px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding: 30px 100px 30px 100px;
}
.internal-links h4 {
text-decoration: underline;
font-size: 1.5rem;
text-align: center;
margin-top: 0;
margin-bottom: 8px;
color: #fff;
}
.links div {
font-size: 1.2rem;
margin:2px 0;
cursor: pointer;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
display: flex;
flex-direction: column;
width: 100%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #4678c9;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
.dialog-wrap {
background-color: rgba(0,0,0,0.7);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1000;
display: none;
}
dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
border: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
dialog div {
font-size: 1.4rem;
color: #fff;
margin: 10px 0;
outline: 1px solid #63889b;
}
dialog div:first-child {
margin-top: 0px;
}
dialog .label {
background-color: #63889b;
padding: 7px;
display: inline-block;
width: 30%;
margin: 0;
text-align: center;
}
dialog .info {
display: inline-block;
padding-left: 5px;
color: #000;
}
dialog button {
border: none;
width: 100%;
margin: auto;
padding: 7px;
position: relative;
top: 10px;
}
dialog button:hover {
cursor: pointer;
transition: all .3s ease;
background-color: #0675ad;
}
dialog div:last-child {
outline: none;
}
#media screen and (max-width: 1600px) {
/*-----HEADER-----*/
.header-info {
font-size: 1.4rem;
width: 392px;
margin-left: 7%;
}
}
#media screen and (max-width: 1400px) {
/*-----HEADER-----*/
header {
height: 70vh;
}
/*-----MAIN-----*/
.col p, .links {
font-size: 1.1rem;
}
}
#media screen and (max-width: 1200px) {
/*-----NAV-----*/
nav {
font-size: 1.5rem;
}
.brand {
margin-left: 3%;
}
.nav-links {
margin-right: 3%;
}
/*-----HEADER-----*/
.header-info {
font-size: 1.3rem;
width: 363px;
}
/*-----MAIN-----*/
.col-1 img {
width: 270px;
height: 132px;
}
.col-2 img {
width: 280px;
height: 107px;
}
.col-3 img {
width: 250px;
height: 140px;
}
.col p, .links div, label {
font-size: 1rem;
}
}
#media screen and (max-width: 1000px) {
/*-----MAIN-----*/
.col p {
width: 85%;
}
.col-1 img {
width: 230px;
height: 112px;
}
.col-2 img {
width: 190px;
height: 82px;
}
.col-3 img {
width: 210px;
height: 120px;
}
/*-----FOOTER-----*/
button {
font-size: 1.1rem;
}
dialog div {
font-size: 1.2rem;
}
}
#media screen and (max-width: 900px) {
/*-----NAV-----*/
nav {
font-size: 1.4rem;
}
/*-----HEADER-----*/
.header-info {
font-size: 1.1rem;
padding: 25px;
width: 308px
}
header {
height: 60vh;
}
}
#media screen and (max-width: 850px) {
/*-----FOOTER-----*/
input {
font-size: 1.3rem;
}
footer {
padding: 30px 70px 30px 70px;
}
}
#media screen and (max-width: 800px) {
/*-----MAIN-----*/
main {
padding: 0 10px;
}
.col-1 img {
width: 190px;
height: 92px;
}
.col-3 img {
width: 170px;
height: 100px;
}
.col-2 {
padding-top: 30px;
}
.col {
margin: 0 10px;
}
.col p {
width: 100%;
}
/*-----FOOTER-----*/
footer {
margin-top: -20px;
}
button {
width: 100%;
}
}
#media screen and (max-width: 765px) {
/*-----FOOTER-----*/
.col p, .links, label {
font-size: 0.9rem;
}
dialog {
width: 400px;
}
}
#media screen and (max-width: 728px) {
/*-----NAV-----*/
nav {
font-size: 1.2rem;
}
/*-----FOOTER-----*/
.internal-links h4 {
font-size: 1.3rem;
}
}
#media screen and (max-width: 650px) {
/*-----MAIN-----*/
.col-1 img {
width: 160px;
height: 80px;
}
.col-2 img {
width: 170px;
height: 70px;
}
.col-3 img {
width: 140px;
height: 87px;
}
}
#media screen and (max-width: 600px) {
/*-----HEADER-----*/
.comp-name {
position: relative;
right: 15px;
}
.nav-links .link {
margin-right: 0;
margin-left: 16px;
}
/*-----MAIN-----*/
main {
flex-direction: column;
}
.col-1 img {
width: 230px;
height: 112px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: static;
}
.col-2 img {
width: 280px;
height: 119px;
}
.col-3 img {
width: 210px;
height: 120px;
}
.col {
padding: 30px 0 20px 0;
}
.col p {
width: 90%;
}
/*------FOOTER-----*/
button {
font-size: 1rem;
}
footer {
margin-top: 0;
}
}
#media screen and (max-width: 550px) {
/*------NAV-----*/
nav {
padding: 15px 0;
}
.logo {
max-width: 60px;
}
.ham-menu {
display: flex;
flex-direction: column;
margin-right: 3%;
cursor: pointer;
}
.nav-links {
display: none;
}
.b1, .b2, .b3 {
width: 45px;
height: 5px;
margin: auto;
background-color: #4678c9;
position: relative;
transition: all .2s ease;
}
.ham-open .nav-links {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
flex-direction: column;
background-color: rgba(0,0,0,0.5);
margin: 0;
padding: 100px 0;
}
.ham-open .nav-links .link {
font-size: 2.2rem;
margin: auto;
color: #fff;
}
.ham-open .comp-name {
color: #fff;
}
.ham-open .b1 {
background-color: #fff;
transform: rotate(45deg) translate(8px, 8px);
}
.ham-open .b2 {
opacity: 0;
}
.ham-open .b3 {
background-color: #fff;
transform: rotate(-45deg) translate(9px, -9px);;
}
/*-----HEADER-----*/
header {
margin-top: 66px;
}
.header-info {
display: block;
position: relative;
top: 40px;
margin-right: auto;
margin-left: auto;
}
/*-----FOOTER-----*/
footer {
padding: 30px 40px 30px;
}
#media screen and (max-width: 500px) {
/*-----FOOTER-----*/
.internal-links h4 {
font-size: 1.1rem;
}
.links div, label {
font-size: 15px;
}
button {
margin-top: 8px;
}
footer {
padding: 20px 30px 20px;
}
dialog {
width: 340px;
}
}
#media screen and (max-width: 450px) {
/*-----FOOTER-----*/
footer {
flex-direction: column;
}
.internal-links {
margin-bottom: 30px;
}
.links {
text-align: center;
}
}
#media screen and (max-width: 400px) {
/*-----HEADER-----*/
.header-info {
font-size: 15px;
padding: 15px;
width: 262px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
<div class="ham-menu">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
<div>Page One</div>
<div>Another Page</div>
<div>Sales Page</div>
<div>Page Three</div>
<div>Keep Going</div>
<div>Last One</div>
<div>Just Kidding</div>
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" class="name" required>
<label for="Name">Address</label>
<input type="text" class="address" required>
<label for="Name">City</label>
<input type="text" class="city" required>
<button type="submit" id="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog>
<div><span class="label">Name:</span><span class="dialog-name info"></span></div>
<div><span class="label">Address:</span><span class="dialog-address info"></span></div>
<div><span class="label">City:</span><span class="dialog-city info"></span></div>
<div><button class="close">Close</button></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
You have a GOB of code here.
How about:
1) Have a global variable
var switch1 = 0;
2) Your first statements in your nav code:
if (switch1 == 1) return;
switch1 = 1;
3) Your setTimeout would be:
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
switch1 = 0;
}, 2000);
This is such a simplistic approach, I'm almost ashamed to post it.