Develop Reference

I don't know how to add this type of slider to my site

I have a problem on the site, I do not know how to add this type of slider to my site, I have never used java script, so could you please help me
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fbf9f1;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fbf9f1;;
/*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
position: fixed;
width: 100%;
z-index: 99;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fbf9f1;;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #fbf9f1;;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
color: green;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color: green;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.icons {
/* display:block; */
display: flex;
gap: 20px;
float: right;
padding: 16px;
margin-right: 50px;
align-items:center;
/* clear:both; */
}
ion-icon {
font-size: 25px;
}
.search {
border: none;
background-color: #fbf9f1;
}
.search::placeholder {
font-size: 19px;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: center;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.slider {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
transform: translateY(40%);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: 10px;
text-align: center;
width: 100%;
z-index: 1;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 0px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
background-color: white;
}
.slider-inner {
overflow: hidden;
}
.slides {
width: 500%;
transition: all 0.5s;
position: relative;
}
.slides .slide-wrapper {
width: 680px;
height: 340px;
float: left;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1360px);
}
/* Code For Your Question */
.slides .slide-wrapper {
background-size: cover;
background-repeat: no-repeat;
}
.slides .slide-wrapper:nth-child(1){
background-image: url('https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp');
}
.slides .slide-wrapper:nth-child(2){
background-image: url('https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp');
}
.slides .slide-wrapper:nth-child(3){
background-image: url('https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp');
}
.m1{
color: #2a6049;
transform: translateX(3%);
}
.m2{
color: green;
font-size: 31px;
transform: translateX(3%);
}
.m3{
transform: translateX(19%);
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
font-size: 20px;
}
.m3:hover{
background-color: #2a6049;
}
div.mini-text{
text-align: center;
transform: translateY(160%)
}
h1{
color: green;
}
.Ls:hover{
color:green;
}
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<meta charset="UTF-8">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header class="header">
Fresh market
<input class="menu-btn" type="checkbox" id="menu-btn" />
<link rel="stylesheet" href="styles.css">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
<div class="icons">
<input class="search" placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<p class="Ls">Login</p>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
</ul>
</header>
<div class="slider">
<input type="radio" name="switch" id="btn1" checked>
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<div class="switch">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>
</div>
<div class="slider-inner">
<div class="slides">
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp" /> -->
</div>
</div>
</div>
</div>
<div class = "mini-text">
<h1>Weekly Deals</h1>
<h3>I'm a paragraph. Click here to add your own text and edit me.<h3>
</div>
</body>
</html>
here is such a slider, but I don't even know how to add it, please help
it has very simple styles, but I don't have enough experience to add this slider to the site

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms &amp Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

Close sidebar menu when click outside of it and when click on menu item

The target is to close the sidebar menu when I click outside of it or when I click on one of the menu item. I've created the two working functions in Javascript to open and close the menu, clicking on the toggle:
<script>
function openNav() {
document.getElementById("#sideMenu").style.width = "250px";
}
function closeNav() {
document.getElementById("#sideMenu").style.width = "0";
}
function clickOutsite() {
TO-DO
}
function clickOnItemAndClose() {
TO-DO
}
</script>
<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
I've tried to create an overlay layer and create a function connected to it, but the result is not valid.
Could you help me, please? Thanks in advance
Edit: here there is a demo
https://codepen.io/Clara83/pen/PoPVMgN

The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">
To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked
function hideSidebar() {
document.getElementById('openSideMenu').checked = false;
}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) {
if (!sidebarContainer.contains(event.target))
hideSidebar();
});
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sideMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: grey;
z-index: 1;
}
.sideMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid black;
}
.sideMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sideMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sideMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sideMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sideIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
<div class="header"></div>
<div id="sidebarContainer">
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active" onclick="hideSidebar()">Item1</li>
<li onclick="hideSidebar()">Item2</li>
<li onclick="hideSidebar()">Item3</li>
</ul>
</div>
</div>

Creating a "tuck in" effect for nav bar items

I'm trying to create an effect where the nav bar items tuck in after you scroll down. This could be done effectively by increasing the bottom padding or decreasing the top padding. However, when I try to add this into my code, the transition does not show and nothing happens. An example of what I'm trying to create can be seen on this website.
My code so far can be seen in this fiddle.
$(document).ready(function() {
$(window).scroll(function() {
if($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
$('#menu1').removeClass('shrink');
}
else {
$('#nav').removeClass('shrink');
$('#menu1').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 {
height: 100vh;
width: 100%;
background: url('https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
background-size: cover;
background-position: center;
position: relative;
}
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;
padding-top: 0px;
padding-bottom: 0px;
}
#menu2 {
grid-column: 2;
padding-top: 0px;
padding-bottom: 0px;
}
#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;
padding-top: 0px;
padding-bottom: 0px;
}
#menu3 {
grid-column: 4;
padding-top: 0px;
padding-bottom: 0px;
}
#menu4 {
grid-column: 5;
padding-top: 0px;
padding-bottom: 0px;
}
/**************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;
z-index: 99;
}
/*============= NEW CSS RULES ============*/
/* #nav {
position: relative;
z-index: 99;
}
*/
#nav, #words{
height: 0px;
background: transparent;
display: block;
position: fixed;
width: 100%;
z-index: 99999;
transition: all ease .5s;
}
#words: {
font-size: 18px;
transition: all ease .5s;
}
#nav.shrink {
height: 80px;
transition: all ease .5s;
background: white;
}
#menu1.shrink{
padding-top: 0px;
transition: all ease .5s;
}
<!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 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div id="menu1">
<a id="navLinks words" href="#home">Home</a>
</div>
<div id="menu2">
<a id="navLinks words" href="#upcoming">Tournaments</a>
</div>
<div id="logo">
<p>It's Academic</p>
</div>
<div id="menu3">
<a id="navLinks words" href="#history">History</a>
</div>
<div id="menu4">
<a id="navLinks words" 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>
In my approach, the tuck-in should happen simultaneously with the nav bar transition as you can see in the javascript as they are grouped together. I can change that later.

Very nice looking site! Here's what you're looking for...
Just add this to your CSS and you're all set:
.shrink .container{
margin-top: -20px;
}
Of course you should adjust the -20px to whatever suits you!

Linked Stylesheet Error - Resource interpreted as Stylesheet but transferred with MIME type text/plain

Following a basic React tutorial (https://www.fullstackreact.com) but I'm not able to get the given stylesheets to work properly due this error in console.
Here is the complete source of what I have so far -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timeline</title>
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div class="demo">
<div id="app"></div>
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
</div>
</div>
)
}
}
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
)
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
</script>
</body>
</html>
I've checked in dev tools and for timeline.css I have "Accept:text/css" in the request headers which I believe is right. I don't know why it is then being transferred with a different type? This question has been asked before but the answers all seem to be saying that something to do with the type of the request is incorrect, but I can't see where.

the webmasters of site block all script and stylesheet.
this is a security feature that avoids MIME type confusion attacks.
for more info go: mozilla developer
Solution:
change your stylesheet timeline.css in other CDN or enter it in your host or in html page
example: your code
or this:
<html>
<head>
<meta charset="utf-8">
<title>Timeline</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<style>
.demo {
position: relative;
}
.demo .notificationsFrame {
z-index: 2;
width: 100%;
top: 20px;
background: #fff;
border-radius: 3px;
overflow: hidden;
font-family: 'Open Sans', Helvetica, sans-serif;
margin-bottom: 40px;
}
.demo .notificationsFrame.show-menu {
transform: translate3d(150px, 0, 0);
}
.demo .notificationsFrame .searchInput {
border: 10px solid red;
box-sizing: border-box;
position: absolute;
top: 13px;
right: 55px;
width: 200px;
height: 34px;
border-radius: 17px;
border: none;
background: #fff;
padding: 0 17px;
font-size: 13px;
color: #666;
transition: all 0.3s ease-in-out;
transform: translateX(15px);
opacity: 0;
pointer-events: none;
}
.demo .notificationsFrame .searchInput:focus {
outline: none;
}
.demo .notificationsFrame .searchInput.active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.demo .notificationsFrame .header {
position: relative;
height: 60px;
background: #5f98cd;
padding-top: 0;
}
.demo .notificationsFrame .header .menuIcon {
position: absolute;
width: 29px;
height: 15px;
top: 23px;
left: 20px;
cursor: pointer;
}
.demo .notificationsFrame .header .menuIcon:hover .dashTop, .demo .notificationsFrame .header .menuIcon:hover .dashBottom, .demo .notificationsFrame .header .menuIcon:hover .circle {
background: #fff;
}
.demo .notificationsFrame .header .menuIcon .dashTop {
position: absolute;
width: 20px;
height: 3px;
top: 0;
left: 0;
background: #b2daff;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.demo .notificationsFrame .header .menuIcon .dashBottom {
position: absolute;
width: 20px;
height: 3px;
top: 0;
left: 0;
background: #b2daff;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 29px;
top: auto;
bottom: 0;
}
.demo .notificationsFrame .header .menuIcon .circle {
position: absolute;
height: 7px;
width: 7px;
border-radius: 4px;
top: -2px;
right: 0;
background: #b2daff;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.demo .notificationsFrame .header .title {
display: block;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 15px;
}
.demo .notificationsFrame .header .searchIcon {
position: absolute;
z-index: 3;
font-size: 21px;
color: #fff;
top: 18px;
right: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.demo .notificationsFrame .header .searchIcon:hover {
color: #fff;
}
.demo .notificationsFrame .content {
position: relative;
height: 100%;
overflow: hidden;
}
.demo .notificationsFrame .content .line {
position: absolute;
top: 0;
left: 40px;
bottom: 0;
width: 3px;
background: #ebebeb;
}
.demo .notificationsFrame .content .item {
position: relative;
z-index: 2;
margin: 20px 30px 30px 70px;
display: block;
/*border-radius: 50%;
border: 5px solid #ecf0f1;
box-sizing: border-box;
position: absolute;
height: 20px;
width: 20px;
background: #fff;
border: 2px solid #5F98CD;
box-shadow: 0 0 0 3px #fff;*/
}
.demo .notificationsFrame .content .item:hover {
color: #5f98cd;
cursor: pointer;
}
.demo .notificationsFrame .content .item .circle {
box-sizing: border-box;
position: absolute;
height: 11px;
width: 11px;
background: #fff;
border: 2px solid #5f98cd;
box-shadow: 0 0 0 3px #fff;
border-radius: 6px;
top: 0;
left: -20px;
}
.demo .notificationsFrame .content .item .avatar {
position: absolute;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
overflow: hidden;
left: -49px;
}
.demo .notificationsFrame .content .item .avatar img {
width: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.demo .notificationsFrame .content .item .time {
display: block;
font-size: 11px;
line-height: 11px;
margin-bottom: 2px;
}
.demo .notificationsFrame .content .item p {
font-size: 15px;
line-height: 20px;
margin: 0px 40px 0px 0px;
font-family: 'Open Sans', Lora, Times, no-serif;
}
.demo .notificationsFrame .content .item p b {
font-weight: 600;
}
.demo .notificationsFrame .content .item .right {
position: absolute;
right: 5px;
font-size: 11px;
top: 11px;
}
.demo .notificationsFrame .content .item .commentCount {
position: absolute;
right: 15px;
font-size: 12px;
top: 11px;
}
.demo .notificationsFrame .content .item .commentCount:after {
content: "\f075";
font-family: FontAwesome;
position: absolute;
font-size: 20px;
color: #ebebeb;
top: -50%;
left: 100%;
margin-left: 10px;
z-index: 3;
}
.demo .notificationsFrame .content .item .commentCount:hover:after {
color: lightblue;
}
.demo .notificationsFrame .footer {
position: relative;
background: #fff;
margin: auto;
height: 30px;
border-top: 1px solid #eee;
width: 100%;
border-radius: 10px;
}
.demo .notificationsFrame .footer button {
background: #eee;
position: absolute;
width: 100%;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
border: 0;
}
.demo .notificationsFrame .footer button i {
margin: 0 10px;
}
</style>
<body>
<div class="demo">
<div id="app"></div>
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
</div>
</div>
)
}
}
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
)
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
</script>
</body>
</html>