Opacity in CSS makes cards on my page overlap the navbar - javascript

I am building a website for a crypto coin meme, the problem is that my navbar doesn't overlap some of the links and cards I created that have 'opacity' argument in CSS. I want to make my navbar overlap everything when I scroll down.
Example photo https://imgur.com/a/Ipd1lOT
HTML code:
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/navbar.css">
<link rel="stylesheet" href="CSS/buttons.css">
<link rel="stylesheet" href="CSS/details.css">
<link rel="stylesheet" href="CSS/container.css">
<link rel="stylesheet" href="CSS/container2.css">
<link rel="stylesheet" href="CSS/container3.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
<title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
<div class="Nav-Container">
<img class="logo" src="assets/shitcoin_logo.png" alt="">
<nav class="navbar">
<ul>
<li class="navbar-links">Home</li>
<li class="navbar-links">About us</li>
<li class="navbar-links">Stake</li>
<li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>: $0.00213</p></li>
<li>Connect Wallet</li>
</ul>
</nav>
</div>
</header>
<div class="container1">
<div class="aboutcointext">
<h1>Welcome to the <span>THUNDER</span> project homepage</h1>
<h2>Worst cypto coin available on the market!</h2>
Buy Thunder (THD)
</div>
<div class="aboutcoinlinks">
Facebook
Instagram
Twitter
</div>
</div>
<div class="details">Why you should <span>NOT</span> invest in us?</div>
<div class="container2">
<div class="reason1">
<img src="assets/man_on_toilet.png" alt="">
<h3>Reason 1:</h3>
<p>We have very little to no experience in the crypto world</p>
</div>
<div class="reason2">
<img src="assets/just_toilet.png" alt="">
<h3>Reason 2:</h3>
<p>This coin is made as a joke and should not be taken seriously</p>
</div>
<div class="reason3">
<img src="assets/money-pngrepo-com.png" alt="">
<h3>Reason 3:</h3>
<p>Your capital is at risk and we are not responsible for your money</p>
</div>
</div>
<div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
<div class="container3">
<div class="">
<p>Compact tool made by us to help you mine easier:</p>
Download THD miner
</div>
</div>
<footer>
<div class="footer-container">
<h2>Contact Us</h2>
<ul>
<li>Support</li>
<li>Email</li>
<li>About Us</li>
</ul>
</div>
<div class="footer-container">
<h2>FAQ</h2>
<ul>
<li>How to buy?</li>
<li>How to sell?</li>
<li>How to mine THD?</li>
<li>More...</li>
</ul>
</div>
</footer>
</body>
</html>
CSS code for navbar:
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
/* background-color: #495057; */
color: white;
}
header{
position: sticky;
top: 0;
background-color: #ADB5BD;
}
header::after{
content: '';
display: table;
clear:both;
}
.Nav-Container{
width: 80%;
margin: 0 auto;
}
.logo{
width: 5rem;
float: left;
}
.navbar{
float: right;
/* text-align: center; */
}
.navbar ul{
list-style: none;
margin:0;
padding:0;
}
.navbar li{
display: inline-block;
margin-left: 70px;
padding-top: 31px;
position: relative;
}
.navbar a{
color: #495057;
text-decoration: none;
text-transform: uppercase;
}
.navbar a:hover{
color: white;
}
.navbar-links::before{
content:'';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 0%;
transition: all ease 250ms;
}
.navbar-links:hover::before{
width: 100%;
}
.navbar img{
float:left;
width: 2rem;
position: relative;
bottom: 7px;
}
.navbar p{
display: inline;
}
.wallet{
display: inline;
padding: 5px 5px;
border: 1px solid #495057;
border-radius: 7px;
}
CSS code for social media links:
.aboutcoinlinks{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.aboutcoinlinks a{
align-self: flex-start;
margin-left:10px;
padding: 20px 15px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
opacity:70%;
transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
opacity: 100%;
}
.aboutcoinlinks .fb{
padding: 20px 15px;
background-color: #4267B2;
border: 1px solid #4267B2;
border-radius: 10px;
}
.aboutcoinlinks .insta{
padding: 20px 15px;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
border-radius: 10px;
}
.aboutcoinlinks .twitter{
padding: 20px 15px;
background-color: #1DA1F2;
border: 1px solid #1DA1F2;
border-radius: 10px;
}


You can refer to this Example.
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 30) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
body{
margin:0;
}
header{
position: fixed;
width: 100%;
padding: 5px 20px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.75s;
}
header .logo{
color: rgb(255, 255, 255);
font-weight: 700;
font-size: 30px;
text-decoration: none;
}
header .nav{
position: relative;
display: flex;
}
header .nav li{
list-style: none;
margin-left: 50px;
height:100%;
}
header .nav li a{
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 20px;
}
header.sticky{
background: rgba(255,255,255,0.85);
padding-top:0px;
padding-bottom:0px;
box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
height:3.75rem;
}
header.sticky .logo{
color: rgb(0, 0, 0);
}
header.sticky ul{
height:100%;
}
header.sticky ul li{
height:100%;
display:flex;
align-items: center;
}
header.sticky ul li a{
color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
border-bottom: 5px solid #ff0157;
}
p{
font-weight: 300;
color: #111;
}
.ban{
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
background-repeat: no-repeat;
background-size:cover;
background-position:left;
}
.ban .box{
max-width: 1000px;
text-align: center;
}
.ban .box h3{
font-size: 5rem;
color: #fff;
}
.ban .box p{
font-size: 1rem;
color: #fff;
}
<header id="header">
Avenger
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Expert</li>
<li>contact</li>
</ul>
</header>
<section class="ban" id="ban">
<div class="box">
<h3>Always Choose Good</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
similique dolor saepe earum consequuntur.</p>
Our Menu
</div>
</section>

Related

Sidebar Affects my page responsiveness and Something causes an overflow

HTML Code
I made some changes to CSS code so that my sidebar can be fixed to the left, however even if I add margin-left to main content, it still extends beyond the view width
I want the page to be responsive with sidebar fixed to left and doesn't cover the main content while maintaining responsiveness
/** #format */
#import url("https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
* {
outline: 0;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
margin: auto;
font-family: "Quicksand", sans-serif;
height: 100vh;
/* overflow-x: hidden; */
/* max-width: 1000px; */
}
.content-wrap {
/* .header-container, */
/* .sidebar-container,
.main-content-wrap, */
/* .footer-wrap */
border: 1px solid red;
}
.container {
padding: 2rem 2.4rem;
margin: 0 auto;
}
.content-wrap {
position: relative;
display: grid;
grid-auto-columns: repeat(8, min-max(200px, 1fr));
/* grid-template-rows: repeat(4, 20rem); */
grid-template-areas: "hd hd hd hd hd " "sd sd main main main " "sd sd nl nl nl " "ft ft ft ft ft ";
width: 100%;
}
ul {
list-style-type: none;
}
/* HEADER */
.header-container {
grid-area: hd;
background-color: #7c6447;
height: 3.72rem;
-moz-box-shadow: 0 0.05rem 2rem 1rem #000000;
box-shadow: 0 0.05rem 2rem 0.01rem #000000;
z-index: 5;
}
.header-content {
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row wrap;
}
.nav-bar {
padding: 20px 36px;
background-color: #7c6447;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.3rem;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline;
}
.nav-bar a {
color: #fff;
text-decoration: none;
font-size: 1rem;
line-height: 1rem;
padding-right: 15px;
padding: 20px;
}
.nav-bar a:hover {
background-color: #ece2d5;
color: #763200;
font-size: 1.1rem;
font-weight: 700;
}
.site-logo {
color: #ece2d5;
text-align: center;
width: 300px;
}
.site-logo h1 {
display: inline;
text-transform: uppercase;
font-size: 1.1rem;
border: 4px solid #ece2d5;
padding: 0.5rem;
width: 300px;
letter-spacing: 0.2rem;
font-weight: 600;
}
.search-btn {
color: #1d1409;
background: #ece2d5;
padding: 0.4rem;
border-radius: 3px;
box-sizing: border-box;
}
.search-btn .search-input {
padding: 4px;
background-color: #ece2d5;
border: none;
color: #1d1409;
}
/* FIXED SIDEBAR */
.sidebar-container {
grid-area: sd;
background-color: #ece2d5;
display: flex;
align-items: center;
position: fixed;
top: 0;
height: 100%;
z-index: 1;
width: 220px;
left: 0;
/* height: 200vh; */
}
.left-sidebar {
font-weight: 600;
text-shadow: 0 1px 20px #9b9b9b;
color: #1d1409;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
transition: linear 2s;
opacity: 0.9;
}
.action-button {
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 0.24em;
padding: 10px 25px;
border: 4px solid #1d1409;
border-radius: 4px;
color: #1d1409;
background-color: #ffffff;
}
.action-button:hover {
background-color: #763200;
color: #ffffff;
cursor: pointer;
border-color: #763200;
}
.social-media-menu {
margin: 40px auto;
}
.social-links {
text-decoration-style: none;
color: inherit;
}
.social-links:hover {
cursor: pointer;
}
.social-media-menu .fa {
font-size: 1.6rem;
padding: 0.4rem;
}
.social-media-menu .fa:hover {
font-size: 2rem;
padding: 0.5rem;
}
/* MAIN CONTENT */
.main-content-wrap {
grid-area: main;
margin-left: 284px;
}
.showcase {
padding: 0;
display: inline-flex;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
}
.showcase-image {
max-width: 100%;
margin: auto;
z-index: -10;
position: static;
max-height: 80%;
}
.showcase-heading {
position: absolute;
padding: 1rem 4rem;
text-align: center;
text-shadow: 0px 1px 20px #000000;
color: #ffffff;
margin: auto;
font-size: 2.4rem;
font-family: "Indie Flower", cursive;
}
.posts-navigation {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 2rem;
}
.posts-navigation a {
color: inherit;
font-size: 1.12rem;
text-decoration: none;
}
.posts-navigation .all-posts:hover {
color: #7c6447;
font-size: 1.15rem;
text-decoration: underline;
}
.posts-navigation .fa {
margin-left: 0.4rem;
}
.posts-navigation .latest {
text-decoration: none;
color: #7c6447;
font-weight: 600;
}
.latest-posts-wrap {
display: grid;
/* grid-gap: 2rem; */
box-sizing: border-box;
margin: auto;
justify-content: center;
padding: 3rem;
}
.post-card {
width: 200px;
/* border: 4px solid #000000; */
}
.card-image {
height: 240px;
width: 180px;
object-fit: cover;
}
.more-btn {
font-size: 0.8rem;
padding: 0.2rem 0.4rem;
border-radius: 0;
margin-top: 1rem;
}
.first-selected-post {
display: flex;
align-items: center;
margin-top: 8rem;
}
.first-selected-post:first-child {
margin-top: 0;
}
.selected-posts-theme {
min-width: 200px;
margin-right: 40px;
}
.card-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(100px, 1fr));
grid-auto-rows: 1fr;
gap: 3rem 2rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-left: 40px;
margin-right: 0;
}
/* .post-card {
} */
.post-card:first-child {
grid-area: 1 / 1 / span 1 / span 2;
}
.post-card:nth-child(2) {
grid-area: 1 / 3 / span 2;
}
.post-card:last-child {
grid-area: 2 / 2 / span 1 / span 2;
}
.back-to-top {
position: absolute;
background-color: #ffffff;
padding: 1rem 0.2rem;
text-transform: uppercase;
color: #1d1409;
font-weight: 600;
font-size: xx-large;
text-align: center;
display: block;
width: 3.6rem;
height: 2.4rem;
letter-spacing: 0.3rem;
line-height: 1.4rem;
bottom: 60rem;
left: 0;
word-wrap: break-word;
border-radius: 0 0.4rem 0.4rem 0;
/* pointer-events: none; */
}
.back-to-top .link {
/* position: fixed;
position: sticky;
pointer-events: all; */
/* top: calc(180vh - 0rem); */
}
.link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.back-to-top:hover {
background-color: #1d1409;
color: #ece2d5;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
/* #media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
} */
/* NEWSLETTER */
.newsletter-signup {
grid-area: nl;
background-color: #ece2d5;
padding: 4rem 2rem;
margin: auto;
width: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column wrap;
align-content: center;
align-self: center;
z-index: 2;
}
.newsletter-heading {
text-align: center;
text-transform: uppercase;
font-size: 1.6rem;
color: #1d1409;
letter-spacing: 0.16rem;
}
.newsletter-tagline {
flex-grow: 2;
margin: 2rem auto;
font-size: 1rem;
color: #7c6447;
/* text-transform: capitalize; */
}
.newsletter-input {
display: inline-flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
background: #1d1409;
padding: 4rem 2rem;
border-radius: 24px;
width: 70%;
margin: auto;
}
.newsletter-input input:first-child {
margin-right: 10px;
}
.newsletter-input>input {
margin-bottom: 1.2rem;
}
.username,
.user-email,
.newsletter-form-submit {
padding: 1rem 2rem;
width: 300px;
border: none;
border-radius: 24px;
font-weight: 500;
font-size: 0.85rem;
color: #7c6447;
}
.newsletter-form-submit {
background: #7c6447;
color: #ece2d5;
margin-top: 2.4rem;
font-weight: 700;
}
.newsletter-form-submit:hover {
background: #763200;
color: #1d1409;
}
/* FOOTER */
.footer-wrap {
grid-area: ft;
background: #000000;
color: #efe;
padding: 1rem 2.4rem;
z-index: 2;
}
#media (max-width: 980px) {
.newsletter-input {
width: 50%;
}
}
#media (max-width: 893px) {
.header-container {
height: 8rem;
}
.header-content {
justify-content: space-between;
align-items: baseline;
}
.first-selected-post {
flex-wrap: wrap;
}
.selected-posts-theme {
margin-bottom: 4rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-top: 4rem;
}
.username,
.user-email {
width: 200px;
}
.newsletter-form-submit {
width: 260px;
margin-top: 1rem;
}
/* .showcase-image {
max-width: 80%;
} */
}
/* MOBILE DESIGN */
#media (max-width: 820px) {
.header-content {
flex-wrap: wrap;
flex-basis: 100%;
}
.header-container {
height: 12rem;
}
.sidebar-container {
display: none;
}
.main-content-wrap {
margin-left: 0;
}
}
#media (max-width: 600px) {
.content-wrap {
display: inline-block;
}
.showcase-heading{
font-size: 1rem;
}
}
<!-- #format -->
<!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>Minimalist Decór</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sidebar.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/newsletter.css" />
<link rel="stylesheet" href="css/footer.css" />
</head>
<body>
<div class="content-wrap">
<div class="header-container">
<!-- HEADER -->
<header class="header-content" id="header">
<!-- NAVIGATION- -->
<div class="nav-bar-wrap">
<nav class="nav-bar">
<ul>
<li>home</li>
<li>blog</li>
<li>about</li>
</ul>
</nav>
</div>
<div class="site-logo">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=350&w=494" alt="logo-icon" />
<h1>minimalist decór</h1>
</div>
<div class="search-btn">
<i class="fa fa-search" aria-hidden="true"></i>
<input class="search-input" type="text" placeholder="search here..." />
</div>
</header>
</div>
<!-- FIXED SIDEBAR -->
<div class="sidebar-container container">
<aside class="left-sidebar">
<div class="subscribe-button">
<a href="#subscribe"><button type="menu" class="action-button">subscribe</button></a
>
</div>
<div class="social-media-menu">
<ul>
<li>
<a href="#" class="social-links"
><i class="fa fa-instagram" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-facebook" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-youtube-play" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
minimalist decór
</aside>
</div>
<!-- MAIN CONTENT -->
<div class="main-content-wrap">
<main class="main-content">
<!-- SHOWCASE -->
<section class="showcase">
<img src="ihttps://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="A couch portraying minimalist decor" class="showcase-image" />
<!-- <img src="images/blob1.webp" /> -->
<h2 class="showcase-heading">
Helping you to navigate through your aesthetics with a minimalism touch!
</h2>
</section>
<div class="blog-posts container">
<nav>
<div class="posts-navigation">
<!-- add arrow icons to all posts -->
<div class="latest">latest posts</div>
<div class="all-posts">
<a href="#">all posts<i
class="fa fa-long-arrow-right"
aria-hidden="true"
></i
></a>
</div>
</div>
</nav>
<div class="latest-posts-wrap">
<div class="first-selected-post">
<div class="card-wrap cardf-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="images/throw-pillow.jpg" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
</div>
<div class="first-selected-post">
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
<div class="card-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
</div>
</div>
</div>
<span class="back-to-top"><a href="#header" class="link"
><i class="fa fa-angle-up" aria-hidden="true"></i> </a
></span>
</main>
</div>
<!-- NEWSLETTER -->
<div class="newsletter-signup">
<h4 class="newsletter-heading">subscribe to our newsletter</h4>
<span class="newsletter-tagline">for tips to spice up your minimalism lifestyle and add a fine touch
to it regularly.
<!-- TODO: down arrow --></span
>
<form class="newsletter-input">
<input type="text" class="username" placeholder="name" />
<input
type="email"
class="user-email"
placeholder="enter email address"
/>
<button type="submit" class="newsletter-form-submit">submit</button>
</form>
</div>
<!-- FOOTER -->
<div class="footer-wrap">
<footer class="footer-content">
<small
>made with love by
mariam adekola</small
>
</footer>
</div>
</div>
</body>
</html>

It's the combination of border and width 100% on .content-wrap that's causing the problem. You're effectively making it 100% plus 1 pixel wide.
.content-wrap {
border: 1px solid red;
}
.content-wrap {
width: 100%;
}
either take off the border or remove width:100% from .content-wrap

unnecessary height is coming in html css

how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!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>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>

Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0

I am trying to make the navbar sticky but my JQuery is not adding the css class that i want to add on scroll function

Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.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;
}
<!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="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</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">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.

Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.

Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.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;
}
<!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="style.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">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</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">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.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;
}
<!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="style.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 sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</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">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>

My hamburger drop-down menu appears behind my slider in the 'How it works' page on Mobile and Pagination is mixed-up with text

If you visit the swiper.js site under Demos, I have tried to replicate slider number 7 with the heading 'Custom Pagination' Refer: Swiper.
Everything seems to work fine with my slider save for 2 things:
The pagination bullets that should appear at the bottom of the page
are mixed up with the text and I would like that they appear like
5px below the last sentence.
When in mobile view my hamburger drop-down menu appears behind the
slider rather than in front of the slider.
I have pasted my code below for the above problem, the page you should click on is titled, 'How it works'. If I have left out any other instruction that might be of assistance kindly let me know and I will update my code. I have also downloaded the swiper.min.js and swiper.min.css in my root folder so kindly do not think I forgot that.
body{
background: #F0F8EA;
font-family: sans-serif;
}
.container{
width: 95%;
max-width: 1000px;
margin: 0 auto;
}
header{
background: #E54B4B;
color: #f8f4f4;
padding: 1em 0;
position: relative;
}
header::after{
content: '';
clear: both;
display: block;
}
.logo{
float: left;
font-size: 1.65em;
margin: 0;
font-weight: 700;
}
.logo ul{
margin: 0;
padding: 0;
list-style: none;
}
.logo a{
color: #f8f4f4;
text-decoration: none;
}
.logo a:hover,
.logo a:focus{
color: #464655;
}
.navbar-nav{
outline: none;
float: right;
}
.navbar-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.navbar-nav a{
color: #f8f4f4;
text-decoration: none;
font-size: 130%;
right: .75em;
}
.navbar-nav a:hover,
.navbar-nav a:focus{
color: #464655;
}
.site-nav{
position: absolute;
top: 100%;
right: 0%;
background: #464655;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
/* display: none; */
}
.site-nav--open{
clip-path: circle(100%);
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #f8f4f4;
display: block;
padding: 1.5em 4.5em;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus{
background: #E4B363;
color: #464655;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 0.7em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle{
padding: 1em;
position: absolute;
top: .75em;
right: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after{
content: '';
display: block;
background: #f8f4f4;
height: 3px;
width: 1.95em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-7px);
}
.hamburger::after{
transform: translateY(4px);
}
.open .hamburger{
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 1077px){
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li{
display: inline-block;
border: none;
}
.site-nav a{
padding: 0;
margin-left: 1.2em;
font-size: 1.15em;
padding-top: 7px;
}
.site-nav a:hover,
.site-nav a:focus{
background: transparent;
}
.site-nav li .fa{
display: none;
}
}
.content-section{
background: #f8f4f4;
padding: 10px;
width: 500px;
margin: auto;
color: #131212;
margin-top: 5px;
margin-bottom: 5px;
border: 2px solid rgb(15, 15, 15);
font-weight: bold;
}
div.form-group{
margin-top: -24px;
}
.btn{
background: rgb(41, 159, 180);
}
h5{
color: #ffff;
}
h6{
color: #ffff;
}
.register{
background: #dbd7d7;
}
html, body{
position: relative;
height: 100%;
}
body{
background: #eee;
font-family: sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: #eee;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
}
.swiper-pagination-bullet{
width: 20px;
height: 20px;
text-align: center;
line-height: 30px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
font-weight: bold;
}
.swiper-pagination-bullet-active{
color: #000;
background: #007aff;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.site-nav').toggleClass('site-nav--open');
$(this).toggleClass('open');
})
})
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<ul>
<li>SakaHapa</li>
</ul>
</div>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>HOME</li>
<li><i class="fa fa-question-circle-o site-nav--icon"></i>HOW IT WORKS</li>
<li><i class="fa fa-user-circle site-nav--icon"></i>PROFILE</li>
<li><i class="fa fa-cart-plus site-nav--icon"></i>PURCHASES</li>
<li><i class="fa fa-eye site-nav--icon"></i>POPULAR</li>
<li><i class="fa fa-envelope site-nav--icon"></i>CONTACT</li>
<li><i class="fa fa-power-off site-nav--icon"></i>Log Out</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-text">
<h2>Slide man</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-text">
<h2>Mafans</h2>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident,
sometimes on purpose.</p>
</div>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
</script>
</div>
</body>
</html>

Add z-index to .site-nav
.site-nav{
position: absolute;
top: 100%;
right: 0%;
background: #464655;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
/* display: none; */
z-index: 1;
}
body{
background: #F0F8EA;
font-family: sans-serif;
}
.container{
width: 95%;
max-width: 1000px;
margin: 0 auto;
}
header{
background: #E54B4B;
color: #f8f4f4;
padding: 1em 0;
position: relative;
}
header::after{
content: '';
clear: both;
display: block;
}
.logo{
float: left;
font-size: 1.65em;
margin: 0;
font-weight: 700;
}
.logo ul{
margin: 0;
padding: 0;
list-style: none;
}
.logo a{
color: #f8f4f4;
text-decoration: none;
}
.logo a:hover,
.logo a:focus{
color: #464655;
}
.navbar-nav{
outline: none;
float: right;
}
.navbar-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.navbar-nav a{
color: #f8f4f4;
text-decoration: none;
font-size: 130%;
right: .75em;
}
.navbar-nav a:hover,
.navbar-nav a:focus{
color: #464655;
}
.site-nav{
position: absolute;
top: 100%;
right: 0%;
background: #464655;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
/* display: none; */
z-index: 1;
}
.site-nav--open{
clip-path: circle(100%);
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #f8f4f4;
display: block;
padding: 1.5em 4.5em;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus{
background: #E4B363;
color: #464655;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 0.7em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle{
padding: 1em;
position: absolute;
top: .75em;
right: .75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after{
content: '';
display: block;
background: #f8f4f4;
height: 3px;
width: 1.95em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-7px);
}
.hamburger::after{
transform: translateY(4px);
}
.open .hamburger{
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 1077px){
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li{
display: inline-block;
border: none;
}
.site-nav a{
padding: 0;
margin-left: 1.2em;
font-size: 1.15em;
padding-top: 7px;
}
.site-nav a:hover,
.site-nav a:focus{
background: transparent;
}
.site-nav li .fa{
display: none;
}
}
.content-section{
background: #f8f4f4;
padding: 10px;
width: 500px;
margin: auto;
color: #131212;
margin-top: 5px;
margin-bottom: 5px;
border: 2px solid rgb(15, 15, 15);
font-weight: bold;
}
div.form-group{
margin-top: -24px;
}
.btn{
background: rgb(41, 159, 180);
}
h5{
color: #ffff;
}
h6{
color: #ffff;
}
.register{
background: #dbd7d7;
}
html, body{
position: relative;
height: 100%;
}
body{
background: #eee;
font-family: sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: #eee;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
}
.swiper-pagination-bullet{
width: 20px;
height: 20px;
text-align: center;
line-height: 30px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
font-weight: bold;
}
.swiper-pagination-bullet-active{
color: #000;
background: #007aff;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.site-nav').toggleClass('site-nav--open');
$(this).toggleClass('open');
})
})
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<ul>
<li>SakaHapa</li>
</ul>
</div>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>HOME</li>
<li><i class="fa fa-question-circle-o site-nav--icon"></i>HOW IT WORKS</li>
<li><i class="fa fa-user-circle site-nav--icon"></i>PROFILE</li>
<li><i class="fa fa-cart-plus site-nav--icon"></i>PURCHASES</li>
<li><i class="fa fa-eye site-nav--icon"></i>POPULAR</li>
<li><i class="fa fa-envelope site-nav--icon"></i>CONTACT</li>
<li><i class="fa fa-power-off site-nav--icon"></i>Log Out</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-text">
<h2>Slide man</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-text">
<h2>Mafans</h2>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident,
sometimes on purpose.</p>
</div>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
</script>
</div>
</body>
</html>

What is preventing the navigation bar from showing up and how to fix it?

On my website which is done, the navigation bar is not working, although I have been trying with every technique that I know to figure out why. I have used z-index, but it didn't work either.
/*Header*/
header{
background:#35424a;
color: #ffffff;
padding-top: 10px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float: right;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin-left: 10px;
}
header nav{
float: right;
margin-top: 10px;
}
header ul{
float: right;
}
header ul li{
float: right;
list-style: none;
position: relative;
}
header ul li a{
display: block;
font-family: arial;
font-size: 14px;
padding:22px 14px;
text-decoration:none;
}
header ul li ul{
display: none;
position: absolute;
background-color: #e8491d;
padding:10px;
border-radius: 0px 0px 4px 4px;
}
header ul li:hover ul{
display: inline-block;
z-index: -1;
}
header ul li ul li{
width: 180px;
border-radius: 4px;
}
header ul li ul li a:hover {
background-color: #f3f3f3;
}
header ul li ul li a{
padding: 8px 14px;
}
header .highlight, header .current a{
color: #e8491d;
font-weight:bold;
}
header a:hover{
color: #cccccc;
font-weight:bold;
}
/*Showcase*/
#showcase{
min-height: 400px;
background:url("https://www.mexticket.com/wp-content/uploads/2016/10/telon.jpg")no-repeat 0 -400px;
background-position: 50% 100%;
text-align: center;
color: white;
}
#showcase h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p{
font-size: 20px;
}
/*Boxes*/
#boxes{
margin-top: 20px;
background-color: #808080;
}
#boxes .box{
float: left;
text-align: center;
width: 23%;
padding: 10px;
}
#boxes .box img{
width: 200px;
height: 125px;
}
/*Boxes01*/
#boxes01{
margin-top: 20px;
background-color: #808080;
}
#boxes01 .box{
float: left;
text-align: center;
width: 23%;
padding: 10px;
}
#boxes01 .box img{
width: 130px;
}
.box img {
border-radius: 4px;
}
/*Information*/
.template{
background-color: #fff;
color: black;
font-family: "Arial", "Helvetica";
font-size: 12px;
}
.information{
margin: 0%;
padding: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ES Torsberg</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="js/scripts.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">ES</span>TORSBERG</h1>
</div>
<nav>
<ul>
<li class="current">Hemma</li>
<li>Kontakt</li>
<li>Schema</li>
<li>Om Oss</li>
<li>
<a>Inriktningar
<ul>
<li>Teater</li>
<li>Musik</li>
<li>Dans</li>
<li>Ljudteknik</li></a>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>ESTETISKA PROGRAMMET TORSBERGSGYMNASIET</h1>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<h3>TEATER</h3><img src="IMAGES/Hemsida 6.jpg">
</div>
<div class="box">
<h3>MUSIK</h3><img src="IMAGES/Hemsida 18.jpg">
</div>
<div class="box">
<h3>DANS</h3><img src="IMAGES/Hemsida 10.jpg">
</div>
<div class="box">
<h3>LJUDTEKNIK</h3><img src="https://cdn.pixabay.com/photo/2016/11/19/13/01/audio-1839162_960_720.jpg">
</div>
</div>
</section>
<section id="boxes01">
<div class="container">
<div class="box">
<h3>INTERVJU MED MAX</h3><img src="IMAGES/Max.jpg">
</div>
<div class="box">
<h3>INTERVJU MED ANJA</h3><img src="IMAGES/anja.jpg">
</div>
<div class="box">
<h3>INTERVJU MED MIKAELA</h3><img src="IMAGES/Max.jpg">
</div>
<div class="box">
<h3>INTERVJU MED LENA</h3><img src="IMAGES/anja.jpg">
</div>
</div>
</section>
<section class="template">
<table class="information">
<tbody>
<td>
<h1 class="information1">Telefonnummer: 010-454 10 00 <br>Skolwebbsidan: torsbergsgymnasiet.se<br>Skoladress: Läroverksgatan 36, 821 33 Bollnäs</h1>
</td>
</tbody>
</table>
</section>
<footer>
<p>ES TORSBERGSGYMNASIET | Design by Tilemachos Marmaras | Copyright © 2019</p>
</footer>
</body>
</html>

Your HTML code is not well structured, <a> is closed before <ul>, try to update it like :
<li>
<a>Inriktningar</a>
<ul>
<li>Teater</li>
<li>Musik</li>
<li>Dans</li>
<li>Ljudteknik</li>
</ul>
</li>
to show the nav up, use z-index:10; like :
header ul li{
float: right;
list-style: none;
position: relative;
z-index:10;
}
try this fiddle : https://jsfiddle.net/6rg3tqyu/

You are almost done, just remove or update the z-index property from ul in css line no. 61.
header ul li:hover ul{
display: inline-block;
z-index: 1;
}

header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
This is overriding the color of your a links to white, so you are not able to see them.

Categories

Resources