We Keep Coding

Sidebar going beyond screen on resize

I have an HTML page with a sidebar. The sidebar is shown when i click 'Upload Data' button. When I resize the window, the sidebar's header (random portion from top) goes beyond the screen and the only way to retrieve is to refresh the page to start fresh. I need a solution for keeping the sidebar inside the window.
Initial body image
After resizing
HTML CODE
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
.fa {
margin-left: -8px;
margin-right: 8px;
}
.bs-example {
margin: 20px;
}
html{
margin:0;
height:100%;
}
</style>
sidebar_style_final.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 450px;
position: fixed;
top: 0;
right: -450px;
height: 100%;
z-index: 999;
background: #ffffff;
color: #r45;
transition: all 0.3s;
overflow: auto;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div id="dismiss" style="left: 30px; top: 20px;" onclick="hide_grey_bound()">
<i class="fas fa-arrow-right" onclick="hide_grey_bound()"></i>
</div>
<div class="sidebar-header" align="right">
<h3>Upload new data</h3>
</div>
<br/>
<div class="bs-example" style="width:400px;position:relative;left:10px;">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#shp_files" class="nav-link" data-toggle="tab" id='new_tab'>Shape Files</a>
</li>
<li class="nav-item">
Category Files
</li>
</ul>
<div class="tab-content" id="tab_content" style="height: 600px; overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
</div>
</div>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info" style="position: relative;float: right;right: 10px;" onclick="function show_grey_bound() { document.getElementById('grey_bound').style.display = 'block'; }
show_grey_bound()">
<i class="fas fa-caret-square-up"></i>
<span>Upload Data</span>
</button>
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
I have already tried
setting document.getELementById('sidebar').scrollTop = 0 onresize of
body.
changing the top of the sidebar onresize.
to give margin-top to 0.
Can anyone help me with this. Like I said, I need the side bar to stay inside.

You can remove the height in your Sidebar content div
<div class="tab-content" id="tab_content" style="overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>

How can I create this hover effect for my image gallery?

Basically, I have created an image gallery that looks like the code below. However, I am having trouble creating a hover effect that goes with the images. I would like the hover effect to look something like this if possible: https://codepen.io/jguerra/pen/rNBdYeJ. Could anyone help me with creating this? Any help is appreciated. Thanks.
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*block level elements*/
.page {
margin: 0px;
padding: 0px;
}
.themains {
margin: 0px;
padding: 0px;
max-width: none;
}
.inner {
max-width: 1000px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
height: 400px;
scroll-snap-type: mandatory;
scroll-behavior: smooth;
background: #2C3E50;
border: solid 7px yellow;
font-size: 0px;
margin-bottom: 50px;
}
.scroll-container .scroll-section {
display: inline-block;
vertical-align: middle;
background: transparent;
border: solid 5px #BFC9CA;
white-space: nowrap;
}
/*Slider X (different sized images)*/
.scroll-container.diff-size {
scroll-snap-destination: 50% 0%;
padding: 20px 0px;
}
.scroll-container.diff-size .scroll-section {
width: auto;
height: 100%;
margin-right: 15px;
scroll-snap-coordinate: 50% 0%;
}
.scroll-container.diff-size .scroll-section:first-child {
scroll-snap-coordinate: 0% 0%, 50% 0%;
margin-left: 15px;
}
.scroll-container.diff-size .scroll-section:last-child {
scroll-snap-coordinate: 50% 0%, 100% 0%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Gallery</title>
<meta charset="UTF-8">
<title>Horizontal Scroll Gallery</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<article class="page">
<article class="themains">
<div class="scroll-intro" id="intro"></div>
<div class="inner">
<div class="scroll-container diff-size"><img class="scroll-section" src="https://cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280.jpg"></div>
</div>
<p><br>
<br></p>
</article>
</article><!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</body>
</html>

I would probably position the images inside a container and use the following kind of code in css. Hopefully it helps somehow.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;

Try using after and before pseudo-elements to make that white border-lines and give blue(or what color you want) background to image. You can make all them invisible and 0 opacity. And when on hover you can make them visible again. Check this css below.
figcaption {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 4rem;
text-align: center;
}
figcaption::before,
figcaption::after {
content: '';
position: absolute;
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
transition: 0.5s;
}
figcaption::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid white;
border-left: 1px solid white;
transform: scale(1,0);
}
figcaption:hover::before,figcaption:hover::after{
transform: scale(1);
}
and you can make the same thing with text opacity.

Getting a jQuery toggle to work as expected

I tried to make a menu on the side of JavaScript. I wanted to handle this problem with jQuery toggle, but it did not happen. Is it because the position is relative?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
div{
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
right: 226px;
}
i{
margin-left: 200px;
display: inline-block;
font-size: 24px;
position: relative;
bottom: 201px;
background-color: white;
color: red;
right: 46px;
transition: all 1s ease ease-in-out;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
</style>
<script>
$(document).ready(function(){
$("i").click(function(){
$("#div1").toggle(500)
})
})
</script>
</head>
<body>
<i class="fas fa-bars"></i>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
</body>
</html>

Yes, it has to do with position: relative. I will explain what is going on:
Your body starts at the top of the viewport and is just as high as the highest of its children pushes it to be, so it stretches downwards to fits its children, but not more. Before toggling, #div1 is the highest child. After toggling, #div1 is hidden, so only the <i></i> remains, and the body will have a very low height.
Now when an element has position: relative, one thing that happens is that you can use top, left, right and bottom on it to move it relative to where it normally would be. Your <i></i> does have position: relative, and it also has bottom: 201px, so it gets moved up 201px. Normally, it would be at the top of the viewport, inside the body. When being moved up that far, it ends up outside of the viewport, so you can't see it anymore.
You can see all this visually for yourself using your Browser's developer tools, for example Page Inspector for Firefox or Chrome's DevTools.

I've changed a bit in your css, but mainly I've moved the i after the div. Check it out and see if this is what you need.
Demo
$(document).ready(function() {
$("i").click(function() {
$("#div1").toggle(500)
})
})
* {
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
display: block;
}
ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr {
float: left;
width: 100px;
}
div {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
float:left;
}
i {
top: 0px;
display: inline-block;
font-size: 24px;
position: relative;
margin-left:5px;
background-color: white;
color: red;
transition: all 1s ease ease-in-out;
}
ul li a:hover {
background-color: rgb(0, 108, 250);
}
i:hover {
color: rgb(0, 108, 250);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars"></i>

This is your snippet with some changes:
removed position:relative from CSS, the positioning is now flex-based (with margin)
tweaked transition a bit and added some styles to make button movement smoother (check out a fix for transition property and --menu_off modifier class)
$(document).ready(function(){
$(".js-menu-toggle-button").click(function(){
$(this).toggleClass('menu-container__toggle-button--menu_off');
$(".js-menu-bar").toggle(500);
})
})
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
.menu-container {
display: flex;
}
.menu-container__menu-bar {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
}
.menu-container__toggle-button {
margin-left: 2rem;
font-size: 24px;
background-color: white;
color: red;
transition: all 0.5s ease-in-out;
}
.menu-container__toggle-button--menu_off {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="menu-container">
<div class="menu-container__menu-bar js-menu-bar">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
</div>
</body>
</html>

How to go from a static navbar to a position:fixed without screwing everything?

I've got problems when going from a normal navbar that just sits in the top side of the browser and disappears when you scroll down to a position:fixed navbar that stays at the top of the browser even when you scroll.
This is the codepen: https://codepen.io/bleah1/pen/gjYBgQ
The problem is that when I add position:fixed and top:0; left:0; right:0; to the .header-container it shrinks and moves the .navigation-bar lower and it pushes the .logo to the left, making it stick to the left side of the browser. I've tried changing some values but I still could not make it work and look good.
Also, the HTML is made kind of in reverse: first for the smaller window size, like phones or tablets and then for the bigger devices.
Full disclosure: These are not my ideas, I saw them on YouTube and I recreated them in an attempt to learn. These are the videos:
https://www.youtube.com/watch?v=FqbOu5ZRFag
https://www.youtube.com/watch?v=Ah_Zitni1y4&
Do you have any idea on what to change to make it work ? Thank you !
/*global $:false */
/*exported formValidationSetup, refreshErrorMessages */
/*jshint unused:false*/
$('.menu-toggle').click(function(){
$('.navigation-bar').toggleClass('navigation-bar--open', 500);
$(this).toggleClass('menu-toggle--open');
});
$(".button").on("click",function(){
$(".input").toggleClass("inclicked");
$(".button").toggleClass("close");
});
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
header{
background-color: #1F2833;
position: relative;
color: #45A29E;
padding: 1em 0;
}
header::after{
content: '';
clear: both;
display: block;
}
body{
font-family: 'Quicksand', sans-serif;
background-color: brown;
margin:0 auto;
/*overflow: hidden;*/
}
.header-container {
position:fixed; /* This creates the problem*/
width:95%; /*changing this to 100% does nothing */
max-width: 1250px;
margin: 0 auto;
backgrounnd-color:#1F2833;
}
.logo {
color:#45A29E;
float:left;
font-size:1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.navigation-bar {
position: absolute;
top: 100%;
right: 0%;
background-color: #1F2833;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
}
.navigation-bar--open{
clip-path: circle(150% at top right);
}
.navigation-bar ul {
margin: 0;
padding:0;
list-style: none;
}
.navigation-bar li{
border-bottom: 1px solid #C5C6C7;
}
.navigation-bar li:last-child{
border-bottom: none;
}
.navigation-bar a{
color: #45A29E;
display: block;
padding: 2em 3em 2em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background: #C5C6C7;
color: #0B0C10;
}
.navigation-bar--icon{
display: block;
font-size: 1.5em;
margin-right: 1em;
width:1.3em;
text-align: right;
color: rgba(255,255,255,.25);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content:'';
display:block;
background: black;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.menu-toggle--open .hamburger{
transform: rotate(45deg);
}
.menu-toggle--open .hamburger::before{
opacity: 0;
}
.menu-toggle--open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
.search-container{
display: none;
}
.cover{
background: blue;
height:300px;
width:400px;
}
#media (min-width: 1250px){
.menu-toggle {
display: none;
}
.header-container{
max-width: 1200px;
}
.navigation-bar {
height: auto;
position: relative;
background: #1F2833;
float:right;
clip-path:initial;
}
.navigation-bar li{
display: inline-block;
border: none;
}
.navigation-bar a{
padding:0;
margin-left: 2em;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background:transparent;
color: rgba(255,255,255,.25);
}
.navigation-bar--icon {
display: none !important;
}
.search-container{
display: inherit;
position: relative;
float: right;
top:-5px;
margin-left: 2em;
}
}
.input{
width: 30px;
height: 30px;
background: none;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.25);
box-sizing:border-box;
outline:none;
transition: width 600ms ease-in-out, border-radius 800ms ease-in-out, padding 200ms;
transition-delay: 300ms;
color:white;
font-size: 16px;
}
.inclicked{
width: 300px;
border-radius: 0;
padding: 0 15px;
padding-right: 40px;
}
.button{
position: absolute;
width:30px;
height:30px;
top:0;
right:0;
box-sizing:border-box;
background:none;
border:none;
outline: none;
cursor:pointer;
}
.button::before{
content:'';
width:3px;
height:15px;
background:rgba(255,255,255,0.25);
position: absolute;
transform: rotate(-45deg);
bottom: -10px;
right: -5px;
transition:500ms;
}
.close::before, .close::after{
content:'';
width:3px;
height: 20px;
background:rgba(255,255,255,1);
position: absolute;
bottom: 5px;
right: 15px;
border-radius: 10px;
}
.close::before{
transform: rotate(-45deg);
}
.close::after{
transform: rotate(45deg);
}
}
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css' rel='stylesheet'>
<link href="navigation-bar.css" type="text/css" rel="stylesheet">
<link href="containers.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Mangacious</title>
</head>
<header>
<div class="header-container">
<h1 class="logo">Mangacius</h1>
<div class="search-container search-container-2">
<form class="search-box" action="index.html" method="post">
<input class="input input-2" type="text" name="search">
<button class="button" type="button" name="button"></button>
</form>
</div> <!--Little Browser Search Bar-->
<nav class="navigation-bar">
<ul>
<li><i class="fa fa-home navigation-bar--icon"></i>Home</li>
<li><i class="fa fa-calendar-check navigation-bar--icon"></i>Today's Uploads</li>
<li><i class="fa fa-list-ol navigation-bar--icon"></i>Top 100</li>
<li><i class="fa fa-store navigation-bar--icon"></i>Store</li>
<li><i class="fas fa-th-list navigation-bar--icon"></i>My List</li>
<li><i class="fas fa-user-cog navigation-bar--icon"></i>User Control Panel</li>
</ul>
</nav> <!-- Navigation Bar -->
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div><!-- Header Container -->
</header>
<body>
<div class="container new-releseas">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div><!-- New Releseas -->
<div class="container must-reads">
</div><!-- Must Reads -->
<div class="container current-series">
</div><!-- Current Series -->
<div class="footer-container">
</div><!-- Footer Container -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Check the new Codepen link, I have fixed the position issue
https://codepen.io/nelh/pen/ejOPwE?editors=1100

Frustrating bug with Javascript

My Jquery works just fine in text editors like fiddle and snippets on StackOverflow but once I put it in Brackets or even open it on Github, the navbar scroll down animation doesn't work. Here is a link to the fiddle, where I used the exact same code I used in Brackets and Github Pages. (I just used a random background image).
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
} else {
$('#nav').removeClass('shrink');
}
});
});
/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
background: url('https://orig00.deviantart.net/2106/f/2012/329/0/e/untitled_drawing_by_walktheinch-d5m49xe.png') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
*/ z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
}
/*============= NEW CSS RULES ============*/
#nav {
position: relative;
}
#nav .logo p {
margin: 10px 0;
}
#nav .background {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ededed;
height: 0;
transition: height 800ms ease;
}
#nav.shrink .background {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div class="menu1">
<a id="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a id="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a id="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a id="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>

Here is a PR: https://github.com/killerchef732/ItsAcademic/pull/2
Basically you didn't include the script tag (<script src="script.js"></script>) in your page and you also had some junk (÷ ,) at the end of your script.js file.
First I noticed your page didn't even have the script code in it.
Then once I added it in, the chrome developer console showed me it encountered errors.