We Keep Coding

Why preloader is showing header section

I am currently working on a website cloning project in order to practice HTML5 and become a better front end developer, so I created a preload animation using CSS. It works fine, but the header section, which includes the navigation and logo, is not hidden. How can I fix this? Is there anything wrong with my code?
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 999;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

The easiest fix would be to add some css to hide the navbar until the .pageloaded class is added to the body.
.navbar {
visibility: hidden;
}
.pageloaded .navbar {
visibility: visible;
}

Before answering to the question "why the header is showing", let's see why the rest of the body is not showing for the first 300ms.
It is because there is a element .spinner. Its width and height take up 100% of the page. Its position is set to fixed means the element is fixed at top 0 and left 0 (the upper-left corner) according to the CSS. More importantly is fixed position element break the normal document flow. Normally element are rendered top-to-bottom, left-to-right. .spinner being removed from document flow means the spinner was taken out and stick to the top left. Therefore the .spinner with 100% size take up the whole screen and showing the spinning bubble. There is another effect, the place originally occupied for .spinner will be remove and the main body it will be brought up. That means .spinner and the main body is not displayed one after one, but they are stacked together. .spinner being on top and cover the rest is because it has a z-index applied to it, which the value is 999.
Now back to the question, why header is showing. Because of bootstrap, .fixed-top has z-index: 1030, which greater than .spinner's 999. That's why it is on top of the spinner.
The solution you need is, to set the .spinner z-index any value greater than bootstrap's default.
.section-spinner {
/* ... */
z-index: 1050;
}
Example below.
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 1050;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

How to make a dropdown menu transition with CSS?

I have created a responsive navigation-bar/menu but I want it to appear with a sliding animation from the top to the bottom when the needed button is presed. The menu does appear on itself but it completely ignores the transitioni have set it to execute. I tried multiple methods - using webkit library, using the change in height method, etc. It appears that none of them work with my code. If anyone can help, please reach to me.
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-color: black;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
color: #747d8c;
text-align: center;
padding: 27px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
padding: 25px 10px;
font-size: 17px;
text-align: center;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 25px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
display: block;
}
.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav-list{
display: none;
max-height: 0;
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.nav-list.active {
display: block;
margin: 0;
padding: 0;
max-height: fit-content;
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
}
#-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
</head>
<body>
<center>
<nav class="nav">
<div class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<span class="nav-list">
<a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a>
</span>
</nav>
</center>
<script src="ResponsiveMenu.js" ></script>
</body>
</html>

A easy way to do it is with CSS, for this cases i always use Animista. Try adding this to your CSS file and then add the class slide-in-top to your menu container.
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

Hello you can use bootstrap to make an easy and fast navbar transition but you need to know what classes to put. to get bootstrap working put this in your head
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Few days before Facing some error in next two Album (It is doing some weird stuff )

some days back I found an very good code for album and its also suit to my program but now when i'm using it i'm having some errors ..
errors is like when i open it do some thing really weird like i'm on the second tab and clicking next photo button but instead of changing this album photos its is changing previous album photos .as well as the first album is not moving it always sowing up ....
I know it is difficult to visualize I request you to open this code on your local editor .....
I'm a really depress please help...............
<!DOCTYPE html>
<html>
<head>
<title> Shahmir's CV </title>
<link rel="icon" href="images/cv.png" type="image/x-icon">
<mata charaset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<mata http-equiv="refresh" content="1"></mata>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="cv.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://unpkg.com/aos#next/dist/aos.css" />
<!-- <script src="https://kit.fontawesome.com/a54d2cbf95.js"></script> -->
</head>
<style>
html {
/* scroll-behavior: smooth; */
}
body {}
#home {
background-image: url(images/background2.png);
background-size: cover;
height: 100vh;
/* i use vh unit becouse to make it fit in the screen */
width: 100%;
z-index: -1;
margin-top: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
/**/
/* filter: grayscale(50%) ; */
}
/*** Album ***/
ul {
margin-top: 90px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
text-decoration: underline;
background-color: transparent;
}
img {
max-width: 100%;
height: auto;
}
.slider {
width: 90vmin;
height: 90vmin;
-webkit-perspective: 100vmin;
perspective: 100vmin;
margin: auto;
-webkit-perspective-origin: top center;
perspective-origin: top center;
position: relative;
box-sizing: border-box;
}
.slider__item {
position: absolute;
bottom: 0;
/* left: 10%; */
width: 100%;
height: 100%;
padding-top: 15vmin;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.18s ease;
transition: -webkit-transform 0.18s ease;
transition: transform 0.18s ease;
transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}
.slider__item:nth-child(1) {
-webkit-transform: translate3d(0, 0, 0vmin);
transform: translate3d(0, 0, 0vmin);
-webkit-transition-delay: 0s;
transition-delay: 0s;
z-index: 7;
}
.slider__item:nth-child(2) {
-webkit-transform: translate3d(0, 0, -15vmin);
transform: translate3d(0, 0, -15vmin);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
z-index: 6;
}
.slider__item:nth-child(3) {
-webkit-transform: translate3d(0, 0, -30vmin);
transform: translate3d(0, 0, -30vmin);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
z-index: 5;
}
.slider__item:nth-child(4) {
-webkit-transform: translate3d(0, 0, -45vmin);
transform: translate3d(0, 0, -45vmin);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
z-index: 4;
}
.slider__item:nth-child(5) {
-webkit-transform: translate3d(0, 0, -60vmin);
transform: translate3d(0, 0, -60vmin);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 3;
}
.slider__item:nth-child(6) {
-webkit-transform: translate3d(0, 0, -75vmin);
transform: translate3d(0, 0, -75vmin);
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
z-index: 2;
}
.slider__item:nth-child(7) {
-webkit-transform: translate3d(0, 0, -90vmin);
transform: translate3d(0, 0, -90vmin);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
}
.slider__item:nth-child(8) {
-webkit-transform: translate3d(0, 0, -105vmin);
transform: translate3d(0, 0, -105vmin);
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
z-index: 0;
}
.slider__image {
width: 100%;
height: 80%;
margin-left: 0%;
background-color: #999;
border: 1.5vmin solid rgb(66, 65, 65);
box-sizing: border-box;
box-shadow: 0px 0vmin 0vmin 0px rgba(0, 0, 0, 0.75), 1px 1vmin 2vmin rgba(0, 0, 0, 0.75);
overflow: hidden;
display: block;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
transition: transform 0.18s ease, opacity 0.2s ease;
transition: transform 0.18s ease, opacity 0.2s ease, -webkit-transform 0.18s ease;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.slider__caption {
/* height: 20%; */
font-size: 150%;
margin-top: -2%;
/* top:-42px; */
font-weight: bold;
color: rgba(0, 0, 0, 0.8);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__btn {
/* position: absolute; */
/* bottom: 0; */
left: 0;
right: 0;
/* top: 88%; */
width: 9vmin;
height: 9vmin;
margin: 2vmin auto;
border-right: 2vmin solid rgba(255, 255, 255, 0.8);
border-bottom: 2vmin solid rgba(255, 255, 255, 0.65);
z-index: 100;
cursor: pointer;
-webkit-transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
}
.slider__btn:active {
border-right-color: #dd6;
border-bottom-color: #dd6;
}
.section-title2 {
text-align: center;
color: #000000;
margin-bottom: 10px;
text-transform: uppercase;
/* margin-top: 50PX; */
padding-top: 79px;
}
</style>
<BODY>
<h5 class="section-title2 h1"><u>AC</u>HIEVEMENTS</h5>
<ul class="nav nav-pills mb-3 " id="pills-tab" role="tablist" style="display:flex; justify-content: center; margin-top: 18px;padding-top: px; ">
<li class="nav-item active" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-Random" role="tab" aria-controls="pills-home" aria-selected="true" style="color: rgb(0, 0, 0); font-size: 120%; ">Random</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-web-tab" data-toggle="pill" href="#website" role="tab" aria-controls="pills-profile" aria-selected="false" style="color: rgb(0, 0, 0); font-size: 120%; ">Web</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contactu" role="tab" aria-controls="pills-contact" aria-selected="false" style="color: rgb(0, 0, 0); font-size: 120%; ">Graphic</a>
</li>
</ul>
<!-- Album number 1 -->
<div class="tab-content " id="pills-tabContent" style="display:flex; justify-content: center;text-align:center;margin-top: -23px;">
<div class="tab-pane fade in active" id="pills-Random" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="slider">
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/repo.png">
<figcaption class="slider__caption" style="margin-top: 6px;">Git Hub Activities</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/freelancing digiskills.png">
<figcaption class="slider__caption" style="margin-top: 6px;">Freelancing Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/Upwork.png">
<figcaption class="slider__caption" style="margin-top: 6px;">Upwork</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/youtuber.png">
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Studio Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/seo digiSkills.png">
<figcaption class="slider__caption" style="margin-top: 6px;">SEO Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/StackOverFlow.png">
<figcaption class="slider__caption" style="margin-top: 6px;">StackOverFlow Rank</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/comment.jpeg">
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Comment Response </figcaption>
</figure>
</div>
<div class="slider__btn" style=" border-right: 2vmin solid rgba(58, 58, 58, 0.8);border-bottom: 2vmin solid rgba(36, 36, 36, 0.65);margin-top:-8%;"></div>
</div>
</div>
<div class="tab-content " id="pills-tabContent" style="display:flex; justify-content: center;text-align:center;margin-top: -23px;">
<div class="tab-pane fade " id="website" role="tabpanel" aria-labelledby="pills-web">
<div class="slider">
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/seo digiSkills.png">
<figcaption class="slider__caption" style="margin-top: 6px;">SEO Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/StackOverFlow.png">
<figcaption class="slider__caption" style="margin-top: 6px;">StackOverFlow Rank</figcaption>
</figure>
<figure class="slider_item" style="">
<img class="slider_image" src="images/Achievements/Randam/comment.jpeg">
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Comment Response </figcaption>
</figure>
</div>
<div class="slider__btn" style=" border-right: 2vmin solid rgba(58, 58, 58, 0.8);border-bottom: 2vmin solid rgba(36, 36, 36, 0.65);margin-top:-8%;"></div>
</div>
<!--
<div class="tab-pane fade" id="pills-web-tab" role="tabpanel" aria-labelledby="pills-web-tab">
<b>shahmir</b>hi
</div> -->
<div class="tab-pane fade " id="pills-contactu" role="tabpanel" aria-labelledby="pills-contact-tab">
DOG
</div>
</div>
</div>
</div>
<!-- content -->
<!-- --------------------------- /Album ------------------------>
<br><br><br><br><br><br><br><br>
<!----------------------- album ---------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(function() {
var btn = $(".slider__btn");
btn.on("click", function() {
$(".slider__item").first().clone().appendTo(".slider");
$(".slider__image").first().css({
transform: "rotateX(-180deg)",
opacity: 0
});
setTimeout(function() {
$(".slider__item").first().remove();
}, 200);
});
});
</script>
<!----------------------- /album ---------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</HTML>
</BODY>

Mysterious gap/padding in OwlCarousel grid gallery

I am trying to figure out why there is a strange gap/margin at the bottom of each row section in this portfolio grid gallery running in OwlCarousel, see example at http://www.samnorris.net/pfwip2/index.html
I have damn near pulled my hair out already trying to debug the problem in developer tools, and been over the relevant CSS thoroughly but have been unable to figure out what is causing this unwanted padding/margin. Would really appreciate any assistance anyone might be able to offer to help me fix this. :)
I believe it my be something to do with #work .item .rollover, but I am not sure what exactly....
Here is all relevant (as far as I know) code:
///////////////////////////////////////////////////////////////////////////
// Work slider
///////////////////////////////////////////////////////////////////////////
var $workslider = $("#workslider");
if($workslider.length){
$workslider.owlCarousel({
loop : true,
autoplay: true,
autoplayTimeout: 4000,
nav : false,
dots : false,
items : 11,
transitionStyle : "fade"
});
}
/* ==========================================================================
WORK
========================================================================== */
#work.paddingstandard {
padding-bottom: 0px !important;
}
/* ---- isotope grid---- */
#portfoliogrid .item {
width: 20%;
float: left;
cursor: pointer;
overflow: hidden;
padding-bottom: 0px !important;
}
#portfoliogrid .item.width2 {
width: 40%;
}
#portfoliogrid img {
width: 100%
}
/* Item rollover */
#work .item .rollover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px;
text-align: center;
}
#work .item .rollover:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 26%;
opacity: 0;
margin-top: 40px;
transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
transform: rotateZ(-45deg);
-webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
-webkit-transform: rotateZ(-45deg);
}
#work .item.width2 .rollover:before {
width: 25%;
left: 38%;
}
#work .item .rollover .centerContainer {
opacity: 0;
height: 100%;
transition: all 0.3s 0.1s;
transform: rotateZ(-5deg);
-webkit-transition: all 0.3s 0.1s;
-webkit-transform: rotateZ(-5deg);
}
#work .item .rollover .centerContainer a {
font-family: "Montserrat";
font-size: 1.250rem;
font-weight: bold;
letter-spacing: -2px;
color: #FFFFFF;
display: block;
text-transform: uppercase;
text-decoration: none !important;
}
#work .item .rollover .centerContainer .title {
font-size: 2.8rem;
line-height: 2.8rem;
margin-bottom: 15px;
}
#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
opacity: 1;
margin-top: 0px;
transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
-webkit-transform: rotateZ(0deg);
}
#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
opacity: 1;
transition: all 0.3s 0.6s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.6s;
-webkit-transform: rotateZ(0deg);
}
/* WORK OPEN ANIMATION */
#keyframes turn {
0% {
transform: rotate(45deg);
}
15% {
transform: rotate(135deg);
}
25% {
transform: rotate(135deg);
}
40% {
transform: rotate(225deg);
}
50% {
transform: rotate(225deg);
}
65% {
transform: rotate(315deg);
}
75% {
transform: rotate(315deg);
}
90% {
transform: rotate(405deg);
}
100% {
transform: rotate(405deg);
}
}
#workLoader {
position: absolute;
z-index: 10000;
-webkit-transition: all 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#workLoader .iconloader {
position: relative;
z-index: 20;
display: block;
margin: 0 auto;
width: 30px;
height: 100%;
width: 100%;
}
#workLoader .iconloader:after {
content: "";
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
border: 4px solid #FFFFFF;
transform: rotateZ(45deg);
animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-webkit-transform: rotateZ(45deg);
-webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-ms-transform: rotate(45deg);
}
#workLoader.width2 .iconloader:after {
width: 25%;
left: 38%;
}
#workLoader .front, #workLoader .back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#workLoader .front {
text-align: center;
}
#workLoader .front img {
width: 100%;
opacity: 0.2;
}
#workLoader .back {
background-color: rgba(20, 20, 20, .95);
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
#workLoader .back #wrkclosebtn {
position: fixed;
top: 10px;
right: 20px;
}
#workLoader .back .fa-times {
font-size: 2rem;
cursor: pointer;
color: #5f5f5f
}
#workLoader .back .fa-times:hover {
color: #FFFFFF
}
.scale100 {
width: 100% !important;
height: 100% !important;
left: 0 !important;
transform: perspective(1000px) rotateX(-180deg);
-webkit-transform: perspective(1000px) rotateX(-180deg);
}
#workdetailcontainer.darkBackground {
padding-top: 40px;
}
/* FIX IE 9/10/11 */
.IE #workLoader {
transition: all .8s !important;
transform: none;
}
.IE #workLoader .front, .IE #workLoader .back {
transition: all .8s !important;
}
.IE #workLoader .back {
transform: perspective(1000px) rotateX(180deg) !important;
}
.IE #wrkclosebtn {
display: none;
}
.IE .scale100 #wrkclosebtn {
display: inline;
}
.IE .scale100 {
transition: none !important;
transform: rotateX(0deg) !important;
}
.IE #workLoader.scale100 .back {
transform: perspective(1000px) rotateX(0deg) !important;
z-index: 10;
}
.IE #workLoader.scale100 .front {
transform: perspective(1000px) rotateX(-180deg) !important;
}
.IE9 #workLoader {
background-color: green;
opacity: 0;
}
/* ==========================================================================
WORK DETAILS
========================================================================== */
#workdetail {
padding: 40px 0;
}
#workdetail h1 {
color: #FFFFFF;
line-height: 4rem;
margin-bottom: 35px;
margin-top: 0px;
font-size: 4rem;
text-align: left;
}
#workdetail #detailImg img {
width: 100%;
}
#workdetail .workDouble #detailImg {
margin-bottom: 35px;
}
#workdetail p, #workdetail #details span {
color: #FFFFFF;
}
#workdetail #details {
margin-bottom: 35px;
font-size: 0.9rem;
}
#workdetail #details span {
font-family: 'Montserrat';
}
#workdetail #details li {
color: #CCC;
margin-bottom: 5px;
}
#workdetail .button.tint:hover {
color: #141414;
background-color: #FFFFFF;
}
/* ==========================================================================
ISOTOPE FILTERS GENERAL
========================================================================== */
.isotopeFilter {
margin-bottom: 30px;
}
.isotopeFilter a {
font-size: 1.250rem;
}
.isotopeFilter .is-checked {
color: red;
}
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<section id="work" class="paddingstandard">
<div class="container">
<h2 class="appear" data-animation="translatefrombottom">WORK</h2>
<!-- Description -->
<p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>
<!-- Isotope Filter -->
<nav id="portfolionav" class="isotopeFilter aligncenter appear">
ALL
<a href="#" data-filter-value=".graphic" >GRAPHIC</a>
IMAGE SLIDERS
VIDEO
</nav>
</div>
<div id="portfoliogrid">
<!-- Begin item -->
<div class="item width2 graphic">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
VIEW DETAILS
</div>
</div>
</div>
<!-- Item Image -->
<img src="img/work/work-double-1.jpg" alt="Portfolio" />
</div>
<!-- End item -->
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-1.jpg" alt="Portfolio" />
</div>
<div class="item graphic" data-url="article.html">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-3.html">DOMOTIC</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-3.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-4.jpg" alt="Portfolio" />
</div>
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-5.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-6.jpg" alt="Portfolio" />
</div>
<div class="item width2 slider" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-9.html">APP MARKET</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-7.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-10.html">DATA STORAGE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-8.jpg" alt="Portfolio" />
</div>
<div class="item width2 video">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-3.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-9.jpg" alt="Portfolio" />
</div>
</div><!-- end "portfoliogrid"-->
</section>

That space is caused by white-space in your html code. You can remove it by applying either...
display:block;
... or...
float:left;
height: auto;
to #portfoliogrid img declaration, on style.css:4218.
I personally prefer the second solution.
As a side-note, you should take a quick look at your console. A library/plugin called glitch seems to output a few errors. I've tested in Chrome and Firefox.

All the DIVs with class .item are absolutely positioned and have a fixed top position which causes this offset.
But all those styles are inline - inside their DIV tags. Apparently (since it's responsive) these settings are assigned dynamically by a script. At smaller widths it works, but on a large screen there's a flaw in the script which causes these few pixels offset. (i.e. seems like there is a little bug in that script)

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>