Aligning <li> in <div> in <body> all to be centered? - javascript

jsut a quick question.
I am having trouble figuring out how to align the gallery icons into the centre of the screen. As you can see from the code snippet it is misaligned. Just to illustrate what I mean you can take a look at this:
Anyone able to point me in the right direction?
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>


Try setting these properties to the ul element:
padding: 0;
text-align: center;
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
padding: 0;
text-align: center;
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>


add
text-align: center;
padding: 0;
to the ul
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
text-align: center;
padding: 0;
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>

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*/
}

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.

Fixed & shrinking navbar

I didn't find anything on Google about this without using Bootstrap and in my project I didn't want to. (because I'm a beginner and I decided to start with a vanilla project - only css html and js and mostly because when I started building this I didn't even know what bootstrap was).
So how I can make the white (id: top-mare + logo) navbar fixed and shrinking while scrolling?
HTML
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Best DAVNIC73</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="css/mqueries.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<button onclick="topFunction()" id="myBtn" title="Inapoi la inceputul paginii"><img src="img/arrow-up-01-128.jpg"/></button>
<script src="js/myBtn.js"></script>
<footer class="footer">
<ul>
<li id="nume">SC Best DAVNIC73 SRL</li>
<li><img src="img/location_1.png" class="location"/> Judet Dambovita, Oras Targoviste, Strada, Nr</li>
<li><img src="img/phone.jpg" class="phone"/>074 44 44 444</li>
<li><img src="img/mail.jpg" id="mail"/>bestdavnic73#gmail.com</li>
<li class="copyright">Copyright Ⓒ 2017</li>
</ul>
</footer>
</div>
</div>
</body>
</html>
CSS
html {
box-sizing: border-box;
height: 100%;
font-family: Roboto, Arial;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: auto;
width: 100%;
padding: 0;
padding-bottom: 6vw;
margin: 0;
font-size: 1.1vw;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 0.73vw;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 0.416vw 1.5625vw;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6vw;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 2.8645vw;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
max-width: 100%;
float: left;
margin-left: 12.5vw;
margin-right: 6.77vw;
width:15vw;
height: auto !important;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom: 3.125vw;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display: inline;
}
#top-mare li a {
margin-top: 2.1875vw;
margin-left: 2.083vw;
padding-right: 1.041vw;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1vw;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #F28A00;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 1.041vw;
}
.footer li {
font-size: 0.9vw;
font-weight:bold;
display: inline;
margin-left: 2.604vw;
padding-right: 0.78125vw;
padding-bottom: 0.263vw;
}
.copyright {
float:right;
}
#nume {
font-weight: italic;
}
#myBtn {
display: none;
position: fixed;
bottom: 3.646vw;
left: 3.125vw;
z-index: 99;
border: none;
outline: none;
background-color: #F28A00;
color: white;
cursor: pointer;
padding: 0.78125vw;
border-radius: 10px;
width: 3.33333vw;
height: 3.3333vw;
}
.location {
width: 0.677vw;
height: 0.677vw;
}
.phone {
width: 0.677vw;
height: 0.677vw;
}
#mail {
height: 0.677vw;
width: 0.9375vw;
}

To create shrinking animation I would suggest you to use CSS transition and jQuery addClass.
So, you're going to measure the scroll position from top. When at height wanted, add CSS class holding shrink values to that element.
For example your logo has class 'logo':
<img src="image/logo.jpg" class="logo"/>
Logo CSS:
.logo {
width: 200px;
transition: all .5s ease-in-out;
}
The class you're going to add/remove is called eg. 'shrink'. It holds shrink values (eg you want the shrinking logo to be 125px wide):
.logo.shrink {
width: 125px;
}
Next add shrink class to logo when needed (70px from top in this example).
$(document).on('scroll', function() {
if ($(this).scrollTop > 70) {
$('.logo').addClass('shrink');
} else if ($(this).scrollTop < 70) {
$('.logo').removeClass('shrink');
}
});
I made you an example: https://jsfiddle.net/cr29y1tc/29/

Java Script code not working if URL is not home/root

I have a java script code for a top navigation bar. The code only works if I am at the root (home) of the website. For example if you click on the plus icon on the top right corner you are taken to another page and then the menu stops working. I am not good at JS right now and I cannot figure out why. I have guessed this could be due to the fact some of the elements are not loaded when the url is different, but I cannot fix it. I am going to post the CSS and html code to see where SCRIPTS are placed. One fact about the Script that is inside the body of the html file is that I cannot move it to outside body since the menu stops working again. I I think the cause is the same thing, but I cannot fix it.
Please give me an edited code since in another question people gave me ideas, while I tried all of them and none worked. This is just to make sure that any answer is a working answer and it is not just a hunch. Thanks!
Here is a link for the deployed website you can use for your trial and error:
http://ejeddi.pythonanywhere.com/
js:
var cbpHorizontalMenu =(function() {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on('click', a);
b.on('click', function(h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
$("cbp-hropen");
d = h;
c.off('click').on('click', e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
Base html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}BPM App{% endblock title %}
</title>
{% block stylesheets %}
<link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
<link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
{% endblock %}
{% block javascript %}
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
{% endblock javascript %}
{% block extra_head %}{% endblock %}
</head>
<body>
<header class="navbar topnavbar">
{% include 'bpmapp/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
<script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
</body>
</html>
topnavbar html
{% load static %}
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-component.css' %}">
<!-- used for icons in navbar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
<header class="clearfix">
<!--<span>Tagline</span>-->
<i class="fa fa-home fa-2x" id="icon-home"> </i>
<nav>
<i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i>
<!--
Previous Blueprint
back to the Codrops article
-->
</nav>
</header>
<div class="nav-main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Products
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Downloads
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Applications
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Projects
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
topnavbar default CSS:
/* General Demo Style */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: yellow;
transform: scale(1.2);
}
.container{
padding-top:0px;
}
.container > header {
width: 90%;
max-width: 70em;
margin: 0 auto; /* remove auto to push the h1 text to left*/
padding: 0 0.5em 0.5em 0.5em;
}
/* Brand Name Text */
.container > header h1 {
font-size: 1.5em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
margin-top:0;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.1em 0.1em;
}
.container > header nav {
float: right;
text-align:bottom;
padding-top:0.1em;
}
/* next previous icons*/
/*
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.5em;
border: 4px solid #47a3da;
text-indent: -8000px;
}
*/
/* after click next previous icons*/
.container > header nav a:after {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
/* hover next previous icons*/
/*
.container > header nav a:hover {
background: #47a3da;
}
*/
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
.fa{
color:#999;
transition: all .2s ease-in-out;
}
.fa:hover{
color: #47a3da;
/*color:rgb(20,220,180); ----- green ----- */
transform: scale(1.2);
}
topnavbar component CSS:
/* menu separator */
.cbp-hrmenu {
width: 100%;
margin-top: 0em;
border-bottom: 4px solid #47a3da;
}
/* general ul (div of tabs) */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto; /*remove auto to push tabs to left*/
padding: 0 1.875em;
}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
display: inline-block;
}
/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
font-size:1.1em;
font-weight: 700;
padding: 0.1em 1em; /* height of tabs*/
color: #999;
display: inline-block;
border-radius:0.5em 0.5em 0em 0em;
transition: all .2s ease-in-out;
}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
/*color: #47a3da;
transition: color 0.2s linear;*/
color:#47a3da;
transform: scale(1.2);
}
/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: white;
background: #47a3da;
}
/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
transition: all .2s ease-in-out;
}
.cbp-hrmenu .cbp-hrsub-inner > div a:hover {
font-weight:bold;
color:yellow;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
#media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
#media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
#media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}

This is the main problem in your code that I can see:
you are using static files, so they are located in the url: http://yourdomain.com/static, but you are trying to load http://yourdomain.com/process_new/static/
you can fix it by 2 ways:
The first way is changing the src attribute in the script tag and adding a "/" at the beginning. It will get the js file from the root:
<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
Another way to fix it is using the Django static template tag. It will create the url of the static file for you:
<script type='text/javascript' src="{% static 'bpmapp/js/cbpHorizontalMenu.min.js' %}"></script>
Don't forget to add this tag at the beginning of the template file:
{% load staticfiles %}

Change Text on Open and Close of menu

Currently my navigation bar text is Menu, and when it is clicked I want Menu to change to Close, and when menu is closed it should go back to saying Menu
Here is my Current Code - On click it does change to 'Close' but doesn't change back:
jQuery(document).ready(function() {
jQuery(".menu-Trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-Expanded").css("display", "");
});
$(".menu-Trigger").html("Close");
});
});
HTML and CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-image: url(Final6Lower.jpg);
background-size: auto 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.nav-menu li, .nav-menu a{
display: inline-flex;
color: rgb(137, 134, 134);
text-decoration: none;
font-family: Raleway;
padding-right: 15px;
font-size: 12px;
letter-spacing: 7px;
}
.nav-menu {
margin-top: 25px;
text-align: center;
}
.nav-menu li, .nav-menu a:hover {
color:white;
}
.socialIcons img {
height: 50px;
width: 50px;
opacity: 0.4;
filter: alpha(opacity=40);
margin-right: 10px;
}
icons img {
position:relative;
display: inline;
margin-right: 0 auto;
margin-left: 0 auto;
}
.icons {
text-align: center;
position:absolute;
bottom:10px;
left:0;
width: 100%;
}
.socialIcons img:hover {
opacity:1;
color:white;
}
.menu-Trigger {
display:none;
}
div.nav-menu ul {
margin:0;
padding:0;
}
div.nav-menu ul li {
list-style: none;
}
#media screen and (max-width: 600px) {
.menu-Trigger {
display: block;
color:white;
background-color: black;
padding:10px;
text-align: center;
cursor:pointer;
font-family: raleway;
}
div.nav-menu ul li {
display:block;
float:none;
padding:8px;
background-color: black;
}
div.nav-menu {
display:none;
}
div.nav-Expanded {
display: block;
}
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >Menu</span>
<div class="nav-menu">
<ul>
<li><a href=#>HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a>
</div>
</body>
</html>

I think you are simply missing the if expression checking whether your menu is expanded or not. Not sure about your html, but this might work:
jQuery(document).ready(function() {
jQuery(".menu-Trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-Expanded").css("display", "");
});
if (jQuery(this).hasClass("nav-Expanded"))
$(".menu-Trigger").html("Close");
else
$(".menu-Trigger").html("Menu");
});
});

Categories

Resources