Active Navigation Bar section

Active Navigation Bar section - javascript

I am trying to make a website for my f1 in schools team and I want to know how I can make a button in my nav bar change bg and font color when I am on that part of the page even with scrolling and clicking on the button. If I am right I need CSS and JS right??
I need help only in the navbar else my website is completely responsive and perfect according to me.
HTML
<html>
<button onclick="topFunction()" id="myBtn" title="Back to top">Back to Top</button>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="main">
<head>
<title>Night Wolves</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="w3-light-white w3-margin">
<!-- Navigation bar -->
<nav class="navbar" id="thebar" style="position: relative; top: -1px; position: sticky;">
<div class="content">
<div class="logo">
<a style="position: relative; top: -7px;" href="#Home">Night Wolves</a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a class="btn" href="#Home">Home</a></li>
<li><a class="btn active" href="#Members">Members</a></li>
<li><a class="btn" href="#About us">About Us</a></li>
<li><a class="btn" href="#Portfolio">Portfolio</a></li>
<li><a class="btn" href="#Contact us">Contact Us</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars" style="position: relative; right: -10px; top: -6px;"></i>
</div>
</div>
</nav>
<div class="w3-content" style="max-width:1500px">
<!-- Image and background with title -->
<header class="w3-display-container w3-wide" style="padding-bottom:32px;" id="Home">
<img class="w3-image"
src="F1CarBG.png"
alt="Photo by Jamie Street" width="1600" height="1060">
<div class="w3-display-left w3-padding-large">
<h1 class="F1teamtext"><b style="font-size: 6vw; color: #8B008B;">F1 TEAM</b></h1>
<h1 class="nightwolvestext"><b style="color: yellow; font-size: 6vw;">NIGHT
WOLVES</b>
</h1>
</div>
</header>
<!-- Members -->
<div class="w3-row-padding" id="Members">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow; position: relative; bottom: -40px;" ,class="w3-wide w3-center">MEMBERS</h2>
<p style="color: yellow; position: relative; bottom: -40px;" ,class="w3-opacity w3-center"><i>"There is no 'I' in team."</i></p>
<br>
<p class="w3-white w3-text-black w3-left-align">
</p>
</div>
<div class="w3-third w3-margin-bottom" id="Arnav">
<div class="w3-card-4" style="position: relative; left: -15px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Arnav</h3>
<p style="color: white;" ,class="w3-opacity">Marketing Manager</p>
<p> </p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kevin</h3>
<p style="color: white;" ,class="w3-opacity">Team Manager</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Chislon</h3>
<p style="color: white;" ,class="w3-opacity">Resource Manager</p>
</div>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kiran</h3>
<p style="color: white;" ,class="w3-opacity">Manufacturing Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -5px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Aaron</h3>
<p style="color: white;" ,class="w3-opacity">Design Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Fadil</h3>
<p style="color: white;" ,class="w3-opacity">Graphic Designer</p>
<p> </p>
</div>
</div>
</div>
<!-- About Us-->
<div class="w3-row-padding" id="About us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">ABOUT US</h2>
<p class="w3-white w3-text-black w3-left-align">
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> We are the Night Wolves</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> This is our team of 6 racers Kevin, Arnav,
Chislon,
Fadil,
<br>
Aaron
and Kiran.
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">We will never give up in the field of
racing.
</p>
<!-- Portfolio -->
<div style="position: relative; bottom: -400px;" class="w3-row-padding" id="Portfolio">
<div class="w3-center w3-padding-32">
<div style="position: relative; top: -350px;">
<h2 style="color: yellow; text-align: top;" ,class="w3-wide w3-center">PORTFOLIO</h2>
<p class="w3-white w3-text-black w3-left-align">
</div>
</p>
<!-- Contact us-->
<div class="w3-row-padding" id="Contact us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">CONTACT US!</h2>
<!doctype html>
<html lang="en" style="background-color: #5518AB;">
<head style="background-color: #5518AB;">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body style="background-color: #5518AB;">
<div class="container mt-5" style="background-color: #5518AB;">
<form class="row g-3" action="https://formsubmit.co/a19d9c2e5e9b57c704f25be5e736c312" method="POST">
<input type="text" name="_honey" style="display: none;">
<input type="hidden" name="_captcha" value="false">
<div class="col-md-6" style="color: white;">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" name="name" id="firstName" required>
</div>
<div class="col-md-6" style="color: white;">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" name="Last Name" id="lastName" required>
</div>
<div class="col-md-8" style="color: white;">
<label for="emailInfo" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="emailInfo" required>
</div>
<div class="col-md-12" style="color: white;">
<label for="comments" class="form-label">Comments, questions?</label>
<textarea class="form-control" id="comments" name="comments, questions" rows="3" required></textarea>
</div>
<div class="col-md-12" style="color: white;">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
<button onclick="topFunction()" id="myBtn" title="Go to top"> Back to Top</button>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</div>
CSS
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #5518Ab;
}
::-webkit-scrollbar-thumb {
background: yellow;
}
::selection{
background: yellow;
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background: yellow;
}
.navbar.sticky{
background: yellow;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: purple;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: purple;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: orange;
background-color: purple;
}
.logo:hover{
background-color: orange;
}
.banner{
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}
.icon{
color: purple;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content{
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbar .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: yellow;
transition: all 0.3s ease;
}
.navbar.show .menu-list{
left: 0%;
}
.navbar .menu-list li{
margin-top: 45px;
}
.navbar .menu-list li a{
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a{
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a{
font-size: 27px;
}
}
#media (max-width: 380px) {
.aboutustext {
position: relative;
bottom: -225px;
}
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -300px;
left: -10px;
}
}
.tlogo {
width: 25%;
height: auto;
position: relative;
left: -350px;
}
.carbg {
width: 25%;
height: auto;
position: relative;
right: -400px;
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -400px
}
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: yellow;
cursor: pointer;
font-size: 18px;
color: purple;
}
/* Style the active class, and buttons on mouse-over */
.active, .thebar:hover {
background-color: yellow;
color: purple;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: yellow; /* Set a background color */
color: purple; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: orange; /* Add a dark-grey background on hover */
}
html {
scroll-behavior: smooth;
background-color: #5518AB;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto"
}
body {
font-family: "Source Sans Pro"
}

Try using a style based on the body class. If you're on the Home page for example, you might see <body class="home"> and then you can create a style like
body.home button {
background-image: ...;
color: #fff;
}

Related

Whitespace randomly appeared in site

I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.
Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn't seem to work.
Any help or ideas would be very much appreciated! :)
Here is the code.
const navSlide = () => {
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navbar-nav");
const navlinks = document.querySelectorAll(".navbar-nav li");
burgerMenu.addEventListener("click", function () {
// Toggle drop down menu
nav.classList.toggle("mobilenav-active");
// Increase links' opacity
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `linkSlide 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
// Toggle burger to cross animation
burgerMenu.classList.toggle("toggle");
});
};
navSlide();
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
#keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
background-position: 50% 60%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
#media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
.transition {
width: 100vw;
height: 50px;
background: #000;
}
/*IMAGE GALLERY*/
.container-fluid {
background: rgb(47,62,70);
background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}
.item {
transition: all 0.5s ease-in-out;
position: relative;
text-align: center;
color: white;
}
.item img {
filter: brightness(50%);
transition: all 0.3s ease-in-out;
}
.item img:hover {
filter: brightness(100%);
}
.img-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: 2.5rem;
color: #f5f5f5;
text-shadow: 1px 1px 2px black;
transition: all 0.3s ease-in-out;
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
#media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
#media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
#media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/project-style.css" rel="stylesheet" />
<link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />
<title>Projects -BWS</title>
</head>
<body>
<div class="site">
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<section class="banner">
<h1 id="banner-text">My Creations</h1>
</section>
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4">
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img1.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img2.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img3.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img4.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img5.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img6.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img7.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img8.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img9.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li>edX</li>
<li>
Coursera
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</div>
</body>
</html>

There is a setting with !important for margin-top buried in an SCSS file.
.mt-4, .my-4 {
margin-top: 1.5rem!important;
}
To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4" style="margin-top: 0 !important;">

Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".
.mt-4 {
margin-top: 1.5rem!important; /*remove this*/
}

How can I make my html slideshow responsive?

I tried making my slideshow responsive using this line of code
<img src="nature.jpg" alt="Nature" class="responsive">
.responsive {
width: 100%;
height: auto;
}
But it made no difference at all. I uploaded my site here: https://acaschoolgpa.000webhostapp.com/
This is my html:
<!DOCTYPE html>
<html>
<header>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="favico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
<link rel="apple-touch-icon" href="favico/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favico/favicon-144.png">
<meta name="msapplication-config" content="favico/browserconfig.xml">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<header>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground"> </p>
<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Boys Campus</li>
<li>Girls Campus</li>
<li>GPA Calculator</li>
</ul>
</nav>
<p class="bluebackground"> </p>
<br>
<div class="slideshow-container" class="responsive">
<div class="mySlides fade" style="--background-image: url('homepagepictures/foodtopeopleschool.jpg')"class="responsive">
<div class="numbertext">1 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/onground.jpg')" class="responsive">
<div class="numbertext">2 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/givingwater.jpg')" class="responsive">
<div class="numbertext">3 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/holdingcamera.jpg')" class="responsive">
<div class="numbertext">4 / 5</div>
</div>
<div class="mySlides fade" style="--background-image: url('homepagepictures/studentsgroup.jpg')" class="responsive">
<div class="numbertext">5 / 5</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="slideshow.js"></script>
<br>
<br>
<br>
<br>
<center>
<h1 class="Welcome">WELCOME TO THE ACA NHS WEBSITE!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
</center>
<h2 class="message">Our Message</h2>
<p id="messagetext" align="justify">"Long before National Honor Society was available in the American Creativity Academy, students sought after an opportunity to create, inspire, and open the doors for creativity. With a heritage of respect to individuality and personal interest, the National Honor Society offered a platform for creation and student ingenuity. Today, the dream of a boy who grew up between the blue walls of ACA turned into reality: he can finally create and enjoy creation for a respected audience!</p>
<p id="messagetext" align="justify">The National Honor Society is a community by students within the campus that works towards creating a better school and local environment. We believe that every act of kindness, no matter how insignificant it may seem, has a drastic impact on a person and starts a ripple of kind-hearted acts among the people. The NHS creates opportunities for its members in volunteering within and off the campus and raising awareness for global issues, which makes them more productive, responsible and engaged citizens. We try to make a difference by inspiring and supporting the people around us whenever we can.</p>
<p id="messagetext" align="justify">The NHS team is more than all of its members; although the impact of one person is limited, working as a team allows us to achieve our goal and leave behind a great mark. We envision a kinder society where people are keen on helping others, and will work until that vision is achieved."</p>
<p id="messagetext" align="justify">- By the NHS Team</p>
<footer class="footer-distributed">
<div class="footer-left">
<h3>NHS<span>ACA</span></h3>
<p class="footer-links">Boys Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
nhsb.aca</a> 
| 
<a href="mailto:nhsb.aca#gmail.com"><i class="fa fa-envelope"></i>
nhsb.aca#gmail.com</a>
</p>
<p class="footer-links">Girls Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
aca.nhs</a> 
| 
<a href="mailto:acanational.hs#gmail.com"><i class="fa fa-envelope"></i>
acanational.hs#gmail.com</a>
</p>
<br>
<p class="footer-company-name">© Mohammad al Nusif</p>
</div>
<div class="footer-center">
<br>
<br>
<br>
<div>
<a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
<p>Boys Campus map</p></a>
</div>
<div>
<a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
<p>Girls Campus map</p></a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br>
<br>
<br>
<span>Boys Campus:</span>
Advisor's Email - sali.alkhuraishi#aca.edu.kw<br>
President's Email - bahaabed2003#gmail.com<br>
Vice President's Email - azoibi17#gmail.com<br>
<br>
<span>Girls Campus:</span>
Advisor's Email - nicole.depew#aca.edu.kw<br>
President's Email - kayanalghanim#gmail.com<br>
Vice President's Email - skkh03#gmail.com <br>
<br>
<div class="footer-icons">
</div>
</div>
</footer>
</body>
</html>
This is my css:
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1200px;
min-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0E68C;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FFD750;
}
.Welcome {
font-family: 'Raleway',sans-serif;
font-size: 62px;
font-weight: 800;
line-height: 45px;
margin: 0 0 24px;
text-align: center;
text-transform: uppercase;
}
.message {
font-family: "Great Vibes";
font-size: 62px;
font-weight: 600;
}
.example_e {
border: none;
width: 759px;
background: #6495ED;
color: Yellow !important;
font-weight: 100;
padding: 20px;
text-transform: uppercase;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.example_e:hover {
color: #404040 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}
a{
text-decoration:none
}
.main {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.girls-message{
color: #F0E68C
}
.mySlides {
height: 80vh;
width: 100%;
margin-bottom: 0.5rem;
background-image: var(--background-image);
background-size: cover;
background-position: center;
}
.mySlides > .numbertext {
background-color: rgba(255, 255, 255, 0.8);
padding: 0.5rem;
}
.bluebackground{
background-color: #4169E1;
margin:0;
}
#messagetext{
margin-left: 20px;
margin-right: 20px
}
#import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
/* The footer is fixed to the bottom of the page */
footer{
bottom: 0;
}
#media (max-height:800px){
footer { position: static; }
}
.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: #e0ac1c;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #e0ac1c;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
#media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
#font-face {
font-family: 'Cookie';
font-style: normal;
font-weight: 400;
src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v12/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
.middlecent{
justify-content: center;
}
.responsive {
width: 100%;
height: auto;
}
This is my javascript:
var slideIndex = 1;
var timeGap = 5000;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
setInterval(function() {
showSlides(slideIndex);
slideIndex++
}, timeGap)
My site looks really weird on mobile but looks great on pc. Mostly because of the slideshow

Firstly remove your min-width: 1000px; in your slideshow-container. Never ever specify min-width more than 400px, if you need your site to be responsive.
Secondly, always adjust your container not the image width or height. Try not to go over the image height as it looks stretched. Try to use background-size: 100% 100%; to display the whole image.
.slideshow-container {
min-width: unset;
min-height: 400px;
}
.mySlides {
height: 100%;
min-height: 400px;
max-width: 100%;
}
Thirdly, do not specify class attribute two times on a single element. Use same attribute and add multiple classes in that.
class="slideshow-container responsive"

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

Closing margn gap in between elements

I am currently working on a website I am in the midst of creating. However, I am having some trouble closing the gap of margin that is on the far right side of the page As seen in this picture I tried setting the body to margin 0px, but that didn't help. Any help would definitely be appreciated and detail, where I went wrong, will be insightful. Thank you!
body {
margin: 0px;
background-color: #1a1a1a;
font-weight: 100;
line-height: 1.7857;
letter-spacing: .075em max-width: 100%;
}
.nav {
border-width: 1px 0;
list-style: none;
background: linear-gradient(to top right, #0b0b0b, #494848);
overflow: hidden;
width: 100%;
height: 77px;
background-color: #000000;
margin-top: 0px margin-bottom: 0px;
margin: 0 auto;
}
.nav li {
display: inline;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 100 line-height: 1.7857;
letter-spacing: .075em;
float: right !important;
margin: 20px;
margin-right: 4%;
line-height: 1.7857;
letter-spacing: .075em;
}
.nav a {
color: white;
text-decoration: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav img {
margin-left: 4%;
}
/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
}
/********************************/
/* Main CSS */
/********************************/
#first-slider .main-container {
padding: 0;
}
#first-slider .slide1 h3,
#first-slider .slide2 h3,
#first-slider .slide3 h3,
#first-slider .slide4 h3 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 h4,
#first-slider .slide2 h4,
#first-slider .slide3 h4,
#first-slider .slide4 h4 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 .text-left,
#first-slider .slide3 .text-left {
padding-left: 40px;
}
#first-slider .carousel-indicators {
bottom: 0;
}
#first-slider .carousel-control.right,
#first-slider .carousel-control.left {
background-image: none;
}
#first-slider .carousel .item {
min-height: 425px;
height: 100%;
width: 100%;
}
.carousel-inner .item .container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0px;
top: 0;
left: 0;
right: 0;
}
#first-slider h3 {
animation-delay: 1s;
}
#first-slider h4 {
animation-delay: 2s;
}
#first-slider h2 {
animation-delay: 3s;
}
#first-slider .carousel-control {
width: 6%;
text-shadow: none;
}
#first-slider h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
#first-slider .p {
padding-top: 125px;
text-align: center;
}
#first-slider .p a {
text-decoration: underline;
}
#first-slider .carousel-indicators li {
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, .4);
border: none;
}
#first-slider .carousel-indicators .active {
width: 16px;
height: 16px;
background-color: #fff;
border: none;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-control .fa-angle-right,
.carousel-control .fa-angle-left {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .fa-angle-left {
left: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control .fa-angle-right {
right: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control {
opacity: 1;
filter: alpha(opacity=100);
}
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-image: url(https://i.imgur.com/LUIbnzG.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide2 {
background-image: url(https://i.imgur.com/agI540K.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide3 {
background-image: url(https://i.imgur.com/owkaQW7.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide4 {
background-image: url(https://i.imgur.com/MpzqHnf.png);
background-size: cover;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px) {}
#media screen and (max-width: 640px) {}
.carousel-inner {
margin-top: 0px;
}
/***Site article**********/
.article-container {
margin-top: 6.0em;
background-color: red;
}
.articletitle h3 {
color: white;
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-weight: bold;
margin-left: 45px;
margin-top: 25px;
border-style: 3px solid;
border-radius: 1px;
background-color: black;
width: 640px;
padding-left: 10px;
text-shadow: 0.5px 0.5px;
}
#pg1p {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
text-transform: none;
width: 80%;
color: white;
margin-top: 4.0em;
margin-left: 10px;
line-height: 29px;
}
#pg1img img {
margin-left: 5%;
margin-top: 50px;
position: static;
border-radius: 8px;
}
/*****HOW IT WORKS***/
#employment {
background-color: #f5f5f5;
padding-top: 70px;
padding-bottom: 70px;
}
.section-title {
margin-bottom: 50px;
font-size: 14px;
font-weight: 200;
}
.st-service {
margin-top: 30px;
}
/*********FOOTER****/
footer {
width: 100%;
background-color: red;
padding: 60px 0px;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Hayat Express</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<ul class="nav">
<img src="logos/navbar-logo.png">
<li><a class="hover" href="#Contact">Contact</a></li>
<li><a class="active" href="#Careers">Careers</a></li>
<li><a class="active" href="#Services">Services</a></li>
<li><a class="active" href="#Drivers">Drivers</a></li>
</ul>
</div>
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://i.imgur.com/JeFTT4W.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Partnership with Hayat Express ®</h3>
<h4 data-animation="animated bounceInUp">Deliver packages in your area</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">
<h3> Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s18.postimg.org/l8cplxczd/forklift.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Residencial E-Commerce</h3>
<h4 data-animation="animated bounceInUp">Providing Service to Consumers Worldwide</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="article-container">
<div class="articletitle">
<h3>CONNECTING YOU TO THE PRODUCTS YOU NEED</h3>
</div>
</div>
<div class="row">
<div class="container-fluid">
<div id="pg1img">
<div class="col-md-6">
<img src="logos/section1.png">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="pg1p">
<p>You deserve a great delivery experience. You want your favorite products delivered to you fast, with free shipping and no hassles.
<br>
<p>We help leading and emerging internet retailers get you what you want. Whether we’re delivering your meal kits to help you quickly prepare dinner, or helping you avoid a last-minute trip to the store, our goal is to give you more time for
what’s important by delivering your favorite products to you — fast.</p>
</div>
</div>
</div>
</div>
</div>
<!--How it works-->
<section id="employment">
<div class="container">
<div class="row" align="center">
<div class="section-title">
<h1>How it works</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-7 st-service">
<br>
<p>
HyatExpress operates within the largest and fastest growing metro areas in the eastern United States. Our 60+ operational facilities and four sorting hubs are staffed by people who take pride in supporting you with consistent performance, and are excited
to be a part of the newly-emerging and sophisticated logistics economy. LaserShip parcels are brought to you by people with a passion for improving the delivery experience. Many have made a career as delivery professionals, others may deliver
as a supplemental job, and some are gig-economy millennials delivering parcels throughout their busy schedules. Together, we’re able to deliver packages to you faster than national carriers. </p>
</div>
<div class="col-md-6 col-sm-7 st-service">
<br>
<img src="https://www.lasership.com/img/section/customer.jpg">
</div>
</div>
</div>
</section>
<script>
(function($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function() {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function() {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function(e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval: 3000,
pause: "false"
});
})(jQuery);
</script>
<footer>
</footer>
</body>
</html>

I just found out the solution by adding padding 0px and overflow-x hidden;
html,body {
;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

Bootstrap 3 scrollspy does not work. It does not highlight “About” when i scroll down then it highlighted

I want to active/highlight "About" but when i scroll down for some space it become active/highlight. It should show highlighted "About" when i open it in browser. I want to active/highlight "About" when i do not move a scroll bar. "About" should be highlighted. Help me to solve this issue. "About" should be highlighted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,900" rel="stylesheet">
<style>
body {
position: relative;
}
ul.nav-pills {
top: 100px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
.bg-1 {
background-color: black;
}
.bg-1 ul li {
color: #ecf0f1;
font-family: 'Gugi', cursive;
font-size: 15px;
}
.bg-2 {
width: 86%;
background-color: #d1d8e0;
}
.col-sm-3 {
width: 14% !important;
background-color: white !important;
}
#media screen and (max-width: 810px) {
#about,
#education,
#certifications,
#skills,
#projects,
#experience,
#interest {
margin-left: 150px;
}
}
#myScrollspy {
position: fixed;
align-self: center;
left: 0;
top: 0;
}
#hello {
font-family: 'Black Han Sans', sans-serif;
font-size: 65px;
margin-left: 150px;
margin-top: 200px;
}
#name {
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 600;
margin-left: 150px;
margin-top: 30px;
}
#self {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#engineer {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#intro {
font-family: 'Lora', serif;
font-size: 20px;
color: #d1d8e0;
margin-left: 150px;
margin-top: 15px;
}
hr {
width: 400px;
border-top: 1px solid #4b6584;
border-bottom: 1px solid #4b6584;
}
#education {
margin-top: 300px;
}
#email {
font-size: 10px;
}
#headings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #343a40;
font-weight: 700;
font-size: 50px;
}
#social {
margin-top: -90px;
margin-left: 250px;
}
.image {
margin-left: 20px;
padding: 1px;
}
.subheadings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #20bf6b;
font-weight: 500;
font-size: 40px;
}
#certifications {
margin-top: 350px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
/* background-color: #337ab7; */
background-color: unset !important;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container-fluid">
<div class="row bg-1">
<!-- Left Side Navigation Bar -->
<div class="col-sm-3 text-center" id="backg">
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked ">
<img class="img-rounded img-responsive center-block image" src="naqqash.png" height="150" width="150 ">
<li class="active">ABOUT</li>
<li>EDUCATION</li>
<li>CERTIFICATIONS</li>
<li>SKILLS</li>
<li>PROJECTS</li>
<li>EXPERIENCE</li>
<li>INTEREST</li>
</ul>
</nav>
</div>
<!-- Right Side -->
<div class="col-sm-9 bg-2">
<!-- About -->
<div id="about">
<h1 id="hello">hello</h1>
<h3 id="name">I'm Muhammad Naqqash,</h3>
<h3 id="self">a self taught developer.</h3>
<h3 id="engineer">I'm a Computer Engineer. </h3>
<p id="intro">I'm a positive and friendly person. Also, I love to set goals and achieve them.<br> My important qualities: self-motivated, ability overcome difficulties and the <br> ability to learn.</p>
<div id="social">
<a href=""><i class="fab fa-facebook fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-linkedin fa-lg"></i> <span style="display:inline-block; width: 0px;"></span>
<i class="fab fa-twitter-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<i class="fab fa-github-square fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
</div>
</div>
<!-- education -->
<div id="education">
<h1 id="headings">EDUCATION</h1>
<h3 class="subheadings"><i class="fas fa-graduation-cap fa-sm"></i><span style="display:inline-block; width: 20px;"></span>BS Computer Engineering</h3>
<h3 class="subheadings"><i class="fas fa-university"></i><span style="display:inline-block; width: 20px;"></span>NUST College of E&ME</h3>
</div>
<div id="certifications">
<h1 id="headings">Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="skills">
<h1 id="headings">Section 4</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="projects">
<h1 id="headings">Section 5</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="experience">
<h1 id="headings">Section 6</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="interest">
<h1 id="headings">Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div>
<h1>Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>

The margin on your title is pushing the about section down so instead of:
#hello {
margin-top: 200px;
}
You could use:
#about {
padding-top: 200px;
}

Develop Reference

JavaScript is the programming language of the Web.

Active Navigation Bar section - javascript

Try using a style based on the body class. If you're on the Home page for example, you might see <body class="home"> and then you can create a style like body.home button { background-image: ...; color: #fff; }

Related

Whitespace randomly appeared in site

How can I make my html slideshow responsive?

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

Closing margn gap in between elements

Bootstrap 3 scrollspy does not work. It does not highlight “About” when i scroll down then it highlighted

Categories

Resources