Hide div content according to its width - javascript

Well, I'm trying to make a responsive menu... I already have the web menu structure, now I'm working on the mobile menu. Said menu must occupy the entire screen, when I close it what I do is reduce its width to 0 with a transition. The problem is that only the div is reduced, its content is still there... in this case only the button, obviously it will have more content later, but to begin with I want that button to disappear every time it is closed.
//Variables
let openMenu = document.getElementById('open_menu');
let contentMenu = document.getElementById('content_menu');
let iconsTopBar = document.querySelectorAll('.icon-top-bar');
let topBarWeb = document.getElementById('top_bar_web');
let topBarMobile = document.getElementById('top_bar_mobile');
let closeMenuMobile = document.getElementById('close_menu_mobile');
let mobileMenu = document.getElementById('mobile_menu');
//Functions
openMenu.addEventListener('click',function(e) {
contentMenu.classList.toggle('close-menu');
});
window.addEventListener("resize", function(){
iconsTopBar.forEach(icon => {
if( window.innerWidth <= 1000){
if(icon.classList.contains('fad')){
icon.classList.remove('fad');
icon.classList.add('fas');
}
}else{
if(icon.classList.contains('fas')){
icon.classList.remove('fas');
icon.classList.add('fad');
}
}
});
if( window.innerWidth <= 768){
contentMenu.classList.add('close-menu');
}else{
contentMenu.classList.remove('close-menu');
}
showMenu();
});
window.onload = showMenu();
function showMenu(){
if( window.innerWidth <= 600){
topBarWeb.style.display = "none";
topBarMobile.style.display = "flex";
contentMenu.style.display = "none";
// this.alert('asdfas');
}else{
topBarWeb.style.display = "flex";
contentMenu.style.display = "flex";
topBarMobile.style.display = "none";
}
}
closeMenuMobile.addEventListener('click',function(e){
mobileMenu.style.width = "0vw";
mobileMenu.style.transition = ".5s";
// alert('sdfsd');
});
#import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
--bg-color: rgba(78, 78, 78, 0.1);
--white:rgb(255, 255, 255);
--blue: rgb(67, 140, 248);
--gray: rgba(0, 0, 0, 0.6);
--red: rgba(212, 34, 34, 0.797);
--orange: rgb(255, 147, 74);
--purple:rgb(222, 83, 155);
--yellow:rgb(255, 238, 88);
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 3px;
}
* {
padding: 0;
margin: 0;
}
body {
background: var(--bg-color);
display: flex;
}
.content-menu {
display: inline-flex;
background: var(--white);
width: 280px;
height: 100vh;
transition: 0.6s;
}
.content-body {
width: 100%;
height: 100vh;
}
.content-body .content-top-bar {
display: block;
padding: 10px;
background: var(--white);
top: 0;
width: 100%;
background-image: url('../img/cardinal/top-bar.png');
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
.content-body .content-top-bar .top-bar {
display: flex;
}
.content-body .content-top-bar .top-bar #open_menu {
display: inline-flex;
font-size: 25px;
cursor: pointer;
padding: 2px;
color: var(--blue);
width: auto;
}
.content-body .content-top-bar .top-bar .content-search-input {
border: 1.5px solid var(--blue);
margin-left: 20px;
border-radius: 5px;
background: var(--white);
width: 35%;
position: relative;
}
.content-body .content-top-bar .top-bar .content-search-input .search {
padding: 2px 0 2px 10px;
border: none;
background: var(--white);
color: var(--gray);
width: 80%;
outline: none;
border-radius: 5px 0 0 5px;
}
.content-body .content-top-bar .top-bar .content-search-input button{
border: none;
background: var(--white);
padding: 2px 5px;
border-radius: 0 5px 5px 0;
color: var(--gray);
position: absolute;
right: 0px;
}
.content-body .content-top-bar .top-bar .icons{
display: flex;
align-items: center;
position: absolute;
right:20px;
color: rgba(48, 132, 222, 0.934);
}
.content-body .content-top-bar .top-bar .icons i{
padding: 5px 10px 5px 10px;
font-size: 20px;
cursor: pointer;
position: relative;
}
/*EFECTO DE PULSO*/
.circle {
width: 7px;
height: 7px;
background: var(--red);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.circle::before, .circle::after {
content:"";
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
width: 3px;
height: 3px;
border: 10px solid var(--orange);
border-radius:100%;
animation: latido linear 3s infinite;
}
.circle::after {
animation-delay: -1.5s;
}
#keyframes latido {
0% { width:7px; height:7px; border:3px solid var(--orange); }
100% { width:20px; height:20px; border:5px solid transparent; }
}
#button-0 { top: 5px; left: 30px; }
#button-1 { top: 5px; left: 25px; }
/*END EFECTO PULSO*/
.content-body .content-top-bar .top-bar .icons a{
text-decoration: none;
color: rgba(48, 132, 222, 0.856);
}
.content-body .content-top-bar .top-bar .icons img{
margin-right: 7px;
font-size: 20px;
border-radius: 100%;
border: 2px solid var(--blue);
}
#prueba {
width: 225px;
}
.close-menu {
width: 50px;
transition: 0.6s;
}
#top_bar_mobile{
display: none;
}
.mobile-menu{
width:100vw;
height: 100vh;
background: red;
position: fixed;
z-index: 10000;
}
.mobile-menu .i{
position: relative;
}
.body {
width: 100%;
}
.card {
margin: 10px;
height: 600px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>Administrador</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::asset('css/cardinal.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/fontawesome.css') }}">
</head>
<body>
<div class="mobile-menu" id="mobile_menu">
<button class="far fa-times" id="close_menu_mobile">cerrar</button>
</div>
<div class="content-menu" id="content_menu">
<div class="nav-bar">
</div>
</div>
<div class="content-body">
<div class="content-top-bar">
<div class="top-bar" id="top_bar_web">
<i class="fad fa-bars" id="open_menu"></i>
<div class="content-search-input">
<input type="text" class="search" id="search" placeholder="Search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="icons">
<i class="fad fa-envelope icon-top-bar" id="message_icon"><div class="circle button" id="button-0"></div></i>
<i class="fad fa-bell icon-top-bar" id="notification_icon" ><div class="circle button" id="button-1"></div></i>
<i class="fad fa-cog icon-top-bar" id="config_icon"></i>
<a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
<span>Aldahir Ruiz Valdez</span></a>
</div>
</div>
<div class="top-bar-mobile top-bar" id="top_bar_mobile">
<i class="fad fa-bars" id="open_menu"></i>
<div class="icons " >
<img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
</div>
</div>
</div>
<div class="body">
<div class="card">
<div class="card-header">Headers</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<script src="{{ URL::asset('js/cardinal.js') }}"></script>
</body>
</html>


With your current implementation, you can add overflow: hidden; property to your .mobile-menu CSS rule.

Related

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

classList.add() is not working | Vanilla JavaScript

My webpage has an element that gets removed when the URL parameters change. One element is supposed to display and the other is supposed to disappear. My attempt was to change the class using classList.add() and classList.remove(). The code that should-have worked:
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");//doesn't seem to work
questionConfirm.classList.add ("hidden");
//triger function
signupConfirmCode()
}
else {
console.log ("hello")
}
View the problem here:
https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup
All Code:
HTML/JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Succes | The Coders Club</title>
<link rel="icon" href="img_2.jpg">
<link rel="stylesheet" href="Styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&family=Poppins:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="info_styles.css">
</head>
<body>
<div class="nav-bar">
<nav>
<img src="img_2.jpg" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
</div>
<div class="welcome" id="question-confirm">
<div class="success" style="height: 50%; position:absolute; bottom: 200px;">
<h1>Your Question is in!</h1>
<p>For your reference, this is what you wrote:</p>
<div id="wrote"></div>
<h2>While you wait why not?</h2>
<button class="standard-button" style="width: 250px; height: 50px;">Check out our classes</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Read the about us page</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Head to our homepage</button><br><br>
</div>
<div class="signup hidden welcome" id="signup-confirm">
<div class="success">
<h1>Success! Your child(ren) enrolled!</h1>
<p>A conformation will be sent to your email address. For your refernce below are the detials you entered into the signup form. If you need to change <strong>any</strong> of these details please contact me.</p>
<div class="signup-infomation">
<h2>Parent Name</h2>
<li id="parent-name-confirm">Error no parent name</li>
<h2>Student Name(s)</h2>
<li id="student-names">Error no student(s) name</li>
<h2>Parent Email Address</h2>
<li id="email-confirm">Error no parent email address found</li>
<h2>Parent Phone Number</h2>
<li id="parent-phone">Error no parent name</li><br><br>
<p>This info is very important. It may be a good idea to bookmark or</p>
<button class="standard-button" onclick="window.print();">Print this info</button><br><br>
</div>
<h3>Please remeber to bring <span id="confirm-price">$39</span> cash to pay Ethan.</h3>
</div>
</div>
<script>
var signupConfirm = document.getElementById ("signup-confirm");
var questionConfirm = document.getElementById ("question-confirm");
console.log (signupConfirm)
const urlParams = new URLSearchParams(window.location.search);
var pageType = urlParams.get("page-type");
var signupConfirmCode = function () {
var parentNameConfirm = document.getElementById ("parent-name-confirm");
parentNameConfirm.textContent = localStorage.getItem("parent_name");
var studentNamesConfirm = document.getElementById ("student-names");
studentNamesConfirm.textContent = localStorage.getItem("child_names");
var parentEmailConfirm = document.getElementById ("email-confirm");
parentEmailConfirm.textContent = localStorage.getItem("email_confirm");
var parentPhoneConfirm = document.getElementById ("parent-phone");
parentPhoneConfirm.textContent = localStorage.getItem("parent_phone");
};
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");
questionConfirm.classList.add ("hidden")
signupConfirmCode()
}
else {
console.log ("hello")
}
</script>
<script>
var wrote = document.getElementById ("wrote");
wrote.innerHTML = sessionStorage.getItem ("Tiny-Data")
</script>
</body>
</html>
CSS
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.welcome {
text-align: center;
background-image: url("img_1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 95vh;
color: white;
position: absolute;
top: 100px;
min-width: 100%;
padding: 0 auto;
}
.welcome-txt {
position: absolute;
top: 40%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p, ul, ol, li, select {
font-family: 'Poppins', sans-serif;
}
footer {
position: absolute;
top: 3000px;
width: 100%;
}
.footer-list {
list-style: none;
}
.footer-secetion {
position: absolute;
bottom: 200px;
text-align: center;
}
.content {
position: absolute;
top: 1200px;
text-align: center;
margin-left: 30%;
}
input {
height: 30px;
width: 300px;
}
::placeholder {
text-align: center;
font-family: 'Poppins', sans-serif;
}
textarea {
resize: none;
width: 700px;
height: 400px;
}
.standard-button {
background-color: rgb(16, 92, 116);
color: white;
border: none;
border-radius: 5px;
height: 30px;
width: 150px;
font-size: medium;
cursor: pointer;
transition: all 0.5s ease-out;
}
.standard-button:hover {
width: 175px;
height: 40px;
}
.hidden {
display: none;
}
.info-content {
position: absolute;
top: 1075px;
text-align: center;
background-image: url("img_5.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.info-content-blocks {
background-color: rgba(204, 204, 204, 0.8);
margin: 30px;
padding: 30px;
}
.diveder {
width: 100%;
height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
.success {
background-color: rgba(255, 255, 255, 0.808);
margin-left: 1.75%;
padding: 30px;
height: 80%;
position: absolute;
bottom: 100px;
color: black;
width: 93%;
}
.signup-infomation {
border: 1px solid;
width: 45%;
position: relative;
left: 25%;
overflow-y: hidden;
overflow-x: scroll;
}
select {
width: 150px;
height: 35px;
font-size: medium;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 85%;
top: 30px;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color:rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left:auto;
margin-right:auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
.fade-out {
opacity: 0;
transition: all 3000ms ease-in-out;
}
.fade-in {
opacity: 1;
transition: all 3000ms ease-in-out;
}
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
.arrow-background {
background-color: rgba(204, 204, 204, 0.8);
min-width: 100px;
padding: 25px;
border-radius: 100px;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
#media print {
.nav-bar {
display: none;
}
.standard-button {
display: none;
}
p {
display: none;
}
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}

Your problem seems to be the HTML, your #question-confirm seems to have a missing closing tag.
You need to add the missing </div>.
This is what makes #signup-confirm to be inside #question-confirm.

fixed grid navbar and sidebar

I am working now on a control panel using HTML CSS, I split the page using grid layout, but the problem is that the navbar & sidebar is not fixed
I have tried several methods including position: fixed;
overflow-y: auto but that didn't work for me.
https://jsfiddle.net/khalil_elyacubi/ckj8bqe9/2/
picture one
picture two

I hope you are looking for something like this.
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
transition: 0.3s;
}
html,body{
height:100%;
}
.container{
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100%;
}
/*------------------------------------*/
/* Navbar */
/*------------------------------------*/
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: sticky;
}
.left-nav a{
font-weight: 300;
font-size: 13px;
text-decoration: none;
color: white;
margin: 0 10px;
}
.left-nav a:hover{
color: rgb(187, 187, 187);
}
.left-nav i:hover{
color: rgb(187, 187, 187);
}
.navbar{
grid-area: header;
background-color: rgba(38, 40, 48, 1);
color: white;
align-items: center;
height: 100%;
}
/*------------------------------------*/
/* Sidebar */
/*------------------------------------*/
.sidebar{
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.sidebar{
grid-area: sidebar;
background-color: rgba(38, 40, 48, 1);
color: white;
}
.logo{
padding: 20px;
}
.logo img{
width: 100%;
}
.category-head{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 83%;
justify-content: space-between;
font-size: small;
font-weight: 300;
color: rgba(255, 255, 255, 0.452);
margin-top: 15%;
}
.width_element{
width: 81%;
}
.category-pages, .category-select{
display: flex;
flex-direction: column;
width: 84%;
}
.category-select{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 2.5% 7%;
color: #C6C6C7;
font-weight: 400;
transition: .3s;
font-size: 0.93rem;
}
.category-select:hover{
background-color: rgba(255, 255, 255, 0.06);
border-radius: 5px;
color: white;
}
.categorySelected{
color: rgba(255, 185, 97, 1);
box-shadow: 0px 0px 21px -13px #ff9d1c6b;
background-color: rgba(53, 56, 65, 1);
border-radius: 5px;
margin-top: 5%;
padding: 3.5% 7%;
}
/*-------select box-------*/
select {
z-index: 3;
float: left;
}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
cursor: pointer;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
font: 13px/1.5 "Poppins", sans-serif;
}
.custom-select-trigger {
position: relative;
/* display: block; */
min-width: 130px;
padding: 6% 104px 6% 25px;
font-weight: 600;
color: #6e7c83;
line-height: 50px;
background-color: rgba(53, 56, 65, 1);
border-radius: 7px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.custom-select-trigger:hover {
-webkit-box-shadow: 0px 10px 50px 0px rgba(70, 73, 83, 0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.custom-select-trigger:before {
position: absolute;
display: block;
content: "";
width: 1px;
height: 50px;
top: 3px;
right: 50px;
margin-top: -3px;
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 20px;
margin-top: -3px;
border-bottom: 1px solid #c7d1d6;
border-right: 1px solid #c7d1d6;
transform: rotate(45deg) translateY(-50%);
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0%;
right: 0;
width: 100%;
margin: 10px 0;
border-radius: 5px;
box-sizing: border-box;
/* box-shadow: 0 2px 1px rgba(0, 0, 0, .1); */
background: rgba(53, 56, 65, 1);
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
border: 0;
height: 300px;
overflow-y: auto;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(-8px);
-webkit-box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
font: 13px/1.5 "Roboto", sans-serif;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.05s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.custom-option:hover,
.custom-option.selection {
color: #fff;
background-color: rgba(253, 183, 102, 0.1);
border: 1px solid rgba(253, 183, 102, 1);
}
/*-------select box end*-------/
/*------------------------------------*/
/* main content */
/*------------------------------------*/
.main{
justify-content: start;
display: flex;
flex-direction: column;
align-items: center;
grid-area: main;
background-color: rgba(30, 31, 37, 1);
color: white;
height: 100%;
overflow-y: auto;
}
.cotainer{
margin-top: 2%;
width: 90%;
height: auto;
display: flex;
flex-direction: column;
align-content: center;
}
.server-banner{
width: 100%;
height: 250px;
/* background: url(./baner1.png) no-repeat; */
filter: blur(5px);
border-radius: 10px;
/* background-size: cover; */
overflow: hidden;
}
.server-banner img{
width: 100%;
position: relative;
top: -140px;
opacity: 25%;
z-index: -1;
}
.server{
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
bottom: 55px;
}
.server img{
width: 9%;
}
.server-members{
padding-left:2%;
}
/*------------------------------------*/
/* Scroll Bar */
/*------------------------------------*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>grid dashboard</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="left-nav">
<i class="fas fa-plus"></i> Support server
<i class="fas fa-code"></i> Commands
</div>
<div class="right-nav">user.icos</div>
</div>
<div class="sidebar">
<div class="logo"><img src="./logo.png" alt="" srcset=""></div>
<select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager">
<option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option>
<option value="A">Ticket Manager</option>
<option value="B">Ticket Manager</option>
<option value="C">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D"><i class="fas fa-cog"></i>Ticket Manager</option>
</select>
<div class="category-head">General <i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select categorySelected"><div class="title">Overview</div> <div class="icon"><i class="fas fa-chart-bar"></i></div></div>
<div class="category-select "><div class="title">Premium</div> <div class="icon"><i class="fas fa-crown"></i></div></div>
</div>
<div class="category-head width_element">Customise bot<i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select"><div class="title">Settings</div> <div class="icon"><i class="fas fa-cog"></i></div></div>
<div class="category-select"><div class="title">Pannels</div> <div class="icon"><i class="fas fa-paper-plane"></i></div></div>
<div class="category-select"><div class="title">Logs</div> <div class="icon"><i class="fas fa-history"></i></div></div>
<div class="category-select "><div class="title">Archived tickets</div> <div class="icon"><i class="fas fa-folder-open"></i></div></div>
</div>
</div>
<div class="main">
<div class="cotainer">
<p>content</p>
<div class="server-info">
<div class="server-banner"> <img src="./baner1.png" alt=""></div>
<div class="server">
<img src="./server-logo-lg.png" alt="">
<div class="server-members">
<div class="server-name">Ticket Manager</div>
<div class="server-id">ID: 123456789</div>
</div>
</div>
</div>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

Trying to make an interactive search bar that opens and closes when you click it, but having issues with the open-source code I found for it

So I was able to modify the dimentions of the search bar to fit what I want it to look like, but there are some issues with the "animation".
What its supposed to look like is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
:root {
--line-thickness: 0.25em;
--glass-size: 65%;
--icon-height: 7rem;
--transition-speed: 0.35s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: white;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: var(--icon-height);
height: var(--icon-height);
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(100% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 2em;
padding: 0 0.5em;
color: white;
}
.search-icon__input::placeholder {
color: rgba(255, 255, 255, .75);
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: calc(100vw - 1em);
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 100%;
height: 100%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="search-icon">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
<script>
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
</body>
</html>
But whats happening with my code is this: (please view in full page mode)
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
.footer {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
}
:root {
--line-thickness: 0.1em;
--glass-size: 20%;
--icon-height: 7rem;
--transition-speed: 0.35s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: rgba(255, 255, 255, .75);
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(30% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="footer">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1>The<u>League</u></h1>
</a>
</div>
</div>
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<script>
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
</main>
</body>
</html>
The "handle" of the search icon isn't attached to the "glass" portion of the search icon, and the handle should stay within the search icon when it expands which its not doing.
What I would like is for it to look the way I showed in the first snippet and be located in the top right on the same line as "TheLeague".
If anyone can help me out I'd really appreciate it.
Thanks

Please try this instead
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<title>TheLeague.com</title>
<style>
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
.footer {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
}
:root {
--line-thickness: 0.1em;
--glass-size: 65%;
--icon-height: 3rem;
--transition-speed: 0.35s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: rgba(255, 255, 255, .75);
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="footer">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1>The<u>League</u></h1>
</a>
</div>
</div>
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
</main>
<script>
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
I changed in css
:root {
--glass-size: 65%;
--icon-height: 3rem;
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
}
View demo
https://codepen.io/Rayeesac/pen/PoZpWYX

Blank Screen on right scroll

On the right side you can a see few pixels of space:
Does anyone know how to remove it? I think it's because of animations I have added with "aos" library. I have already had this error without animations, but I fixed it with this code:
*, *::before, *::after {
box-sizing: border-box;
}
This is the link for the code so you can preview the page:
https://jsfiddle.net/5rq8grcL/
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'IBM Plex Sans Condensed', sans-serif;
background-image: url("/assets/images/masaze.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
scroll-behavior: smooth;
animation: fadeEffect 1s;
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar-list {
list-style-type: none;
text-align: center;
margin: 0;
overflow: hidden;
background-color: #000;
width: 100%;
opacity: 0.9;
position: fixed;
z-index: 1;
}
#navbar-list li {
text-align: justify;
display: inline;
}
#navbar-list li a {
color: white;
text-decoration: none;
display: inline-block;
}
#navbar-list li a:hover {
color: #a0c2d5;
transition: .5s;
}
.pocetna {
font-size: 1.7rem;
padding: 25px 20px;
float: left;
}
.linkovi {
padding: 35px 20px;
position: relative;
right: 180px;
}
.linkovi:active {
color: black;
background-color: white;
}
#main {
text-align: center;
padding-top: 15%;
}
#main h1 {
font-size: 4.5em;
text-shadow: 1px 1px 1px #000000;
}
#main h3 {
font-size: 17pt;
}
hr {
width: 615px;
opacity: .2;
}
.button {
height: 50px;
font-size: 20px;
margin-top: 20px;
cursor: pointer;
padding: 10px;
outline: none;
text-decoration: none;
border: none;
border-radius: 3%;
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #a0c2d5;
transition: .5s;
}
section {
position: relative;
margin-top: -5px;
}
#video {
background-color: rgba(20, 25, 25, 0.5);
min-width: 100%;
min-height: 100%;
margin-top: 580px;
z-index: 0;
position: relative;
}
#section1 {
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 200px;
bottom: 0;
left: 0;
}
#section1 h3 {
font-size: 25pt;
}
#section1 p {
font-size: 18pt;
letter-spacing: 1px;
text-shadow: 1px 1px gray;
}
#contact {
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
height: 500px;
display: table;
table-layout: fixed;
border-spacing: 10px;
margin-top: 50px;
}
#section2 {
font-size: 25pt;
text-align: center;
background: rgba(0, 0, 0, 0.2);
height: 100%;
background-image: url("/assets/images/masaze.jpg");
}
#section2 h3 {
margin: 0;
padding: 20px 0;
}
.sectionc {
display: table-cell;
}
.sectionc a {
color: black;
text-decoration: none;
padding: 5px;
}
.sectionc a:hover {
transition: 0.5s;
color: #a0c2d5;
}
#map {
width: 700px;
height: 400px;
margin: 50px auto;
}
#section3 {
text-align: center;
font-size: 25pt;
background: rgba(0, 0, 0, 0.5);
background-image: url("/assets/images/proba.jpg");
height: 705px;
}
.kdn {
margin: 0;
padding: 20px;
color: white;
}
#footer {
background-color: black;
color: white;
height: 80px;
}
#footer p {
margin: -5px;
text-align: center;
padding: 30px;
}
#footer p a {
color: white;
text-decoration: none;
padding-left: 10px;
}
#footer p a:hover {
color: #a0c2d5;
transition: .5s;
}
span {
color: black;
transition: 1.5s;
}
span:hover {
color: white;
transition: 1.5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Masaže Gligorijević</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/main.css">
<link rel="icon" href="/assets/images/logo.png">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<script src="/assets/js/main.js"></script>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbar-list">
<li>
<a class="pocetna" href="#"><img src="/assets/images/logo icon.ico" width="40" height="30" style="padding-right:10px;">Masaže Gligorijević</a>
</li>
<li class="linkovil"><a class="linkovi" href="#">Početna</a></li>
<li class="linkovil"><a class="linkovi" href="#section1">O nama</a></li>
<li><a class="linkovi m" href="#section2">Kontakt</a></li>
<li><a class="linkovi" href="#section3">Kako do nas</a></li>
</ul>
</div>
</nav>
<header>
<div id="main">
<h1>Masaže Gligorijević</h1>
<h3>Ulaganjem u svoje zdravlje, ulažete u kvalitet sopstvenog života.</h3>
<hr>
<button class="button"><i class="fas fa-play"></i> Rezervišite Odmah</button>
</div>
</header>
<section>
<video autoplay muted loop id="video">
<source src="/assets/images/klip.mp4" type="video/mp4">
</video>
<div id="section1" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h3>O nama</h3>
<p>
Profesionalni maser i specijalno usavršeni fizioterapeut čija veština pokazuje odlične rezultate kod klijenata. <br><br> Naš salon je opremljen profesionalnom opremom. Masaže se obavljaju na stolovima za masažu.<br><br>Kompletnom uživanju doprinose
prijatni zvuci muzike i mirisi aromatičnih ulja.<br> NAŠI klijenti odlaze uz pravilo: NAKON MASAŽE OPET IMAM OSMEH!
</p>
</div>
</section>
<section id="section2">
<h3>Kontakt</h3>
<div id="contact">
<div id="sectionc" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h4>Zakažite vaš termin već sada!</h4>
<p><i class="fas fa-location-arrow"></i> Adresa: Ljubiše Uroševića 6/21, Jagodina</p>
<p><i class="fas fa-mobile"></i> Tel: 060 078 2880</p>
<p><i class="fas fa-at"></i> Email: milosgliga92#gmail.com</a>
</p>
</div>
<div class="sectionc" data-aos="fade-left" data-aos-duration="1500" data-aos-easing="linear">
<h4>Pratite nas na društvenim mrežama!</h4>
<p><i class="fab fa-facebook-f"></i> Facebook</p>
<p><i class="fab fa-instagram"></i>Instagram</p>
</div>
</div>
</section>
<div id="section3" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">
<h3 class="kdn">Kako do nas</h3>
<div id="map">
</div>
</div>
<footer>
<div id="footer">
<p>
© 2018 <span> Đorđe Gligorijević </span> All Rights Reserved
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</p>
</div>
</footer>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvHllMfDUDEVM_GtdkQ6_hyj4wMJ2vVxM&callback=initMap"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>

On #footer p, remove margin: -5px; or at least change it to margin: -5px 0px;. The negative left and right margins are what's causing the gap.

100% work. Try this
<script>$('[data-aos]').parent().addClass('hideOverflowOnMobile');</script>
<style>
#media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}
</style>

Categories

Resources