We Keep Coding

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

Responsive header not opening or closing header

I'm creating a responsive header for a website I'm creating and I'm not getting this output where when my browser gets small enough the bars icon comes up to press. But for some reason when I try to open up the menu it does not work. I'm looking for some help on this I can't seem to figure it out as I'm not very knowledgeable in JavaScript, CSS, HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css1/headercss2.css">
<script src="javascript/script.js" defer></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i>
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>
<script src="javascript/script.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons{
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
display: none;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225,225,225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu{
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover > .sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display:none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover > .sub-menu{
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times{
display: block;
}
nav.active .fas fa-bars{
display: none;
}
nav.active .nav-list {
display:flex;
}
}
JavaScript
const selectElement = (element) => document.querySelector(element);
selectElement('.menu-icons').addEventListener('click', () => {
selectElement{'nav').classList.toggle('active');
);

You have an extra { where you should have a (:
document.querySelector('.menu-icons').addEventListener('click', () => {
document.querySelector('nav').classList.toggle('active');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons {
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu {
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover>.sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover>.sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display: none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover>.sub-menu {
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times {
display: block;
}
nav.active .fas fa-bars {
display: none;
}
nav.active .nav-list {
display: flex;
}
}
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i> text
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>

Fluid responsive navigation with dropdown

I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance

scroll in jquery menu instead of background

On a mobile version of the website I've a hamburger jquery menu that shows all the menu and submenu items. So far so good, but the problem is, if I have a lot of menu items, it will not fit the screensize thus some of the items or not visible. It would be a simple solution to just scroll in the menu itself to access them.
In short: how do I enable scrolling in the jquery menu when the menu is open?
I've included a screenshot to give you an idea how my menu looks like:
/* Site navigation */
.navbar {
position: relative;
width: 100%;
height: 70px;
background-color: rgba(0,120,191,0.8);
z-index: 9999;
}
.default-menu {
display: block;
float: right;
}
/* Expanding submenus */
ul.jquerymenu li.parent {
position: relative;
}
ul.jquerymenu li.parent span.parent {
display: none;
}
.ie ul.jquerymenu li.parent span.parent {
display: none;
}
ul.jquerymenu li.parent span.closed {
background: transparent;
}
ul.jquerymenu li.parent span.open {
background: transparent;
}
ul.jquerymenu li.parent ul {
margin: 0;
width: auto;
position: absolute;
top: 70px;
left: 0;
box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.2);
}
ul.jquerymenu li.parent ul li {
width: 100%;
background-color: #006699;
text-align: left;
margin: 0 !important;
padding: 0 !important;
line-height: 1;
}
ul.jquerymenu li.parent ul li a {
padding: 20px !important;
margin: 0;
display: block;
line-height: 1.5;
text-decoration: none;
color: #fff;
}
.hamburger.mean-container {
position: absolute;
z-index: 1;
right: 0;
}
.mean-container .mean-bar {
width: 100%;
height: 70px;
min-height: 70px;
position: relative;
background: transparent;
padding: 0;
}
.mean-container .mean-nav ul li {
margin: 0;
font-size: 1.6rem;
}
.mean-container .mean-nav ul li:hover {
background: rgba(23,41,59,0.8);
}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 88%;
padding: 20px;
margin: 0;
text-align: left;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-top: 0;
}
.mean-container .mean-nav ul li a:hover {
color: #fff;
}
.mean-container .mean-nav {
float: left;
width: 100%;
background: #006699;
margin-top: 70px;
}
.mean-container a.meanmenu-reveal {
width: 36px;
height: 30px;
padding: 20px 16px;
font-size: 2.8rem;
line-height: 32px;
}
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 5px;
margin-top: 5px;
}
.mean-container .mean-nav ul li a.mean-expand {
margin-top: -2px;
width: 100%;
height: 44px;
padding: 12px !important;
text-align: right;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 500;
background: transparent;
border: 0!important;
border-left: 0 !important;
border-bottom: 0 !important;
font-size: 3rem;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
background: transparent;
}
.mean-container .mean-nav ul li li a {
border-top: 0;
}
<nav class="navbar" style="position: fixed; top: 0px;">
<div class="container">
<div class="site-logo">
<a href="/" title="Title img" rel="home" id="logo">
<img src="storm-logo-56x182.png" alt="Alt text">
</a>
</div>
<div class="hamburger mean-container"><div class="mean-bar">X<nav class="mean-nav">
<div class="content">
<!--[if IE]><div class="ie"><![endif]--><ul style="display: block;"><li><span></span>De rijschool<ul style="display: none;"><li>De auto's</li><li>Voordelen</li><li>Bovag</li><li>De instructeurs</li><li>Slagingspercentage</li><li>Ervaringen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Opleidingen<ul style="display: none;"><li>Overzicht</li><li>Automaat</li><li>Handgeschakeld</li><li>Theorielessen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Specialisme<ul style="display: none;"><li>Aanpassingen</li><li>Automaat</li><li>Rijles ADHD</li><li>Rijles en ASS</li><li>Rijtest</li><li>Vastgelopen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Trainingen<ul style="display: none;"><li>Hybride rijden</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Prijzen<ul style="display: none;"><li>Auto</li><li>Theorie</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Contact<ul style="display: block;"><li>Aanmelden</li><li>Informatie aanvraag</li><li>Bel mij terug</li><li class="mean-last">Contactgegevens</li></ul><a class="mean-expand mean-clicked" href="#" style="font-size: 20">-</a></li></ul><!--[if IE]></div><![endif]--> </div>
</nav></div></div>
</div>
<span class="js-responsive-dom-placeholder"></span>
</nav>

When I click on image popup, it appears at the bottom instead of over the top [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to code a modal image gallery. I found an html code for one, that includes a little JS, but it doesn't come with any CSS. So when I click on the image, (currently only the top left one is linked up) the modal shows up at the bottom. I know nothing about JS or modals, could someone help me with what sort of code I would need to make the modal pop up over top of everything? Thanks in advance!
#font-face {
font-family: Gudea;
src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
font-size: 93%;
line-height: 1.5em;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
max-width: 1100px;
padding: 0 25px;
margin: 0 auto;
}
/* Header */
div.header {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top:40px;
height: 30px;
background-color: #E9E9E9;
padding: 40px 0;
}
/*Logo*/
h1 span {
position: absolute;
top: 97px;
left: 50%;
width: 402px;
height: 160px;
margin: -80px 0 0 -201px;
text-indent: -999em;
z-index: 99;
background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}
/*Satooth Pattern*/
h2 span {
position: absolute;
top: 140px;
height: 20px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/*Sawtooth Pattern Two*/
h3 span {
position: absolute;
margin-top: -30px;
height: 40px;
text-indent: -999em;
z-index: 90;
background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
background-repeat: repeat-x;
width: 100%;
}
/* Navigation */
#mainMenuCheck {
/* display none breaks this in some browsers, so just slide it out of view */
position:absolute;
left:-999em;
}
#mainMenu {
position:relative; /* depth sort over h1 */
background:#754 url(images/dots.png) top left;
padding:0.40em 0.75em 0.05em;
/* left margin adjusts for uneven menu width, change as needed */
text-align:center;
}
#mainMenu li {
list-style:none;
display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
color:#F0E8E0;
text-shadow:
0 0 2px #000,
2px 2px 2px #000,
2px 2px 3px #000;
}
#mainMenu a {
display:inline-block;
vertical-align:bottom;
text-decoration:none;
color:#F0E8E0;
-webkit-transition:color 0.3s, text-shadow 0.3s;
transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#87C6BC;
}
#mainMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#mainMenu .lastInSet a:after {
display:none;
}
#mainMenu .setBreak {
padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
content:"\2605";
font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom: 1em;
}
#mainMenu:after {
bottom:0.3em;
font-size:150%;
margin-left:-1.5em;
}
#mainMenu ul:before {
margin-left:-3em;
}
/* Body Content */
div.body-content {
padding: 50px 0;
background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
font-family: Gudea;
}
div.center{
width:100%;
}
/*
#heart-header {
width: 50%;
height:auto;
margin-left: auto;
margin-right: auto;
display: block;
}
/*float left*/ .left { float: left; /*left in our text*/ margin: 20px; /*space around the image*/
}
/*float left*/ .right { float: right; margin: 20px; /*space around the image*/
}
#media screen and (max-width: 793px){
.left{
margin:0;
width:100%;
display: block;
float: none;
}
.right{
margin:0 auto;
width:75%;
display: block;
float: none;
}
}
}
/*
div.center h2 {
margin: 0;
font-size: 30px;
font-size: 3.5vw;
font-family: Gudea;
font-weight: bold;
position: absolute;
top:60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
/* Thirds */
div.thirds {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button1 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button2 {
width:90px;
height:40px;
margin-left: 38%;
}
div.one-third-last {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button3 {
width:90px;
height:40px;
margin-left: 38%;
}
/*Level Two*/
div.four {
padding-bottom: 50px;
text-align: center;
font-family: Gudea;
}
div.button4 {
width:90px;
height:40px;
margin-left: 38%;
}
div.five {
width: 30%;
float: left;
margin-right: 5%;
text-align: center;
font-family: Gudea;
}
div.button5 {
width:90px;
height:40px;
margin-left: 38%;
}
div.six {
margin: 0;
text-align: center;
font-family: Gudea;
}
div.button6 {
width:90px;
height:40px;
margin-left: 38%;
}
.flex {
padding: 4px;
display: flex;
flex-wrap: wrap;
}
.flex {
padding: 4px;
margin-right: 2%;
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
margin-left:3%;
margin-bottom: 20px;
text-align: center;
}
/**/
h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;
}
/* Main Column */
div.main {
width: 100%;
float: left;
margin-top: -30px;
margin-right: 5%;
text-align: center;
font-family: Gudea;
position: relative;
}
/* Footer */
div.footer {
background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
margin-top: 30px;
margin-bottom: 30px;
color: #FFF;
padding: 15px 0;
text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
#media (min-width:900px) {
.header2 {
display: none;
}
.menu {
display: none;
}
}
#media (max-width:900px) {
body {
z-index: 100;
margin:;
font-family: font:bold 16px/18px arial,helvetica,sans-serif;
background-color: #f4f4f4;
}
a {
color: #F8F4E6;
text-shadow:
0 0 5px #000,
5px 5px 5px #754;
}
.menu a:before,
.menu ul:before,
.menu ul:before {
content:"\2605";
}
/* header */
.header2 {
background-color:#6A4E39;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
z-index: 3;
}
.header2 ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-image:none;
}
.header2 li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header2 li a:hover,
.header2 .menu-btn:hover {
background-color:#4EB4AC;
}
.header2 .logo {
display: block;
float: left;
font-size: 15px;
padding: 10px 20px;
margin-top: 15px;
text-decoration: none;
}
/* menu */
.header2 .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header2 .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header2 .menu-icon .navicon {
background: #F8F4E6;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
background: #F8F4E6;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
margin-top: 7px;
}
.header2 .menu-icon .navicon:before {
top: 03px;
}
.header2 .menu-icon .navicon:after {
top: -2px;
}
/* menu btn */
.header2 .menu-btn {
display: none;
}
.header2 .menu-btn:checked ~ .menu {
max-height: none;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
}
/* 48em = 768px */
#media (max-width: 899px) {
#mainMenu {
display: none;
justify-content: center;
}
/* section */
.section {
overflow: hidden;
margin: auto;
max-width: 1400px;
}
.section a {
position: relative;
float: left;
width: 100%;
}
.section a img {
width: 100%;
display: block;
}
.section a span {
color: #fff;
position: absolute;
left: 5%;
bottom: 5%;
font-size: 2em;
text-shadow: 1px 1px 0 #000;
}
.section-split a span {
display: none;
}
.section-split a:hover span {
display: block;
}
/* 48em = 768px */
#media (min-width: 48em) {
.section-split a {
width: 50%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sandmann Farm</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
<a href="/">
<span>-</span>
</a>
</h1>
<!--Sawtooth Pattern-->
<h2>
<a href="/">
<span>-</span>
</a>
</h2>
<!-- Header -->
<div class="header"><div class="section-inner">
</div></div>
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>What We Do</li>
<li class="lastInSet setBreak">Events</li>
<li>Success Stories</li>
<li>Contact</li>
<li>Photos</li>
<li class="lastInSet">Blog</li>
</ul>
</div>
<!--Mobile Navigation-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li> Home</li>
<li> About</li>
<li> What We Do</li>
<li> Events</li>
<li> Success Stories</li>
<li> Contact</li>
<li> Photos</li>
<li> Blog</li>
</ul>
</header>
<!-- Body-Content -->
<div class="body-content"><div class="section-inner">
<div class="flex">
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
<div class="button3">
</div>
</div>
<div class="item">
<div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
</div>
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
<a href="/">
<span>-</span>
</a>
</h3>
<!-- Footer -->
<div class="footer"><div class="section-inner">
<p>Footer text placed here.</p>
</div></div>
</body>
</html>

You can just add a bit of CSS:
#modal01 {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
See the example on codepen: http://codepen.io/anon/pen/XjJAdw

Let's focus in on what modals exactly are. Take a look at this.
Basically, inside your head tag, add this code.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
On your img tags, add this code.
<img data-toggle="modal" data-target="#myModal" src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg">
This is how to make your modal.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>