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>

How to place navigation bar on top in transparent

I want to place the navigation bar on top, in transparent, as the shown in the picture. I tried to pix the position and the width and height but still didn’t work.
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/arnold-francisca-nPhl2x4fk2s-unsplash.jpg);
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 25px 50px 75px 100px;
justify-content: space-between;
align-items: center;
position: relative;
}
nav img {
width: 85px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: rgb(8, 8, 8);
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 3px;
background: #d6574e;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1 {
font-size: 40px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 16px;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #cfaba9;
border: 1px solid #cfaba9;
padding: 10px 30px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border-radius: 50px;
background: #cfaba9;
transition: 1s;
}
nav .fa {
display: none;
}
#media(max-width: 700px){
.text-box h1 {
font-size: 20px;
}
.nav-links ul li {
display: block;
}
.nav-links ul li {
position: absolute;
background: #cfaba9;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa {
display: block;
color: #cfaba9;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>Nikko Permelona | UX/UI Designer, Frontend Developer & Learner</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css">
</head>
<body>
<section class="header"></section>
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</body>
</html>

Just wrap the nav and the text-box divs with the header section. It looks like you closed the header section right away and haven't wrapped it with anything, modify the part like this:
<section class="header">
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</section>
This should work fine

You can make it transparent by use the css property:
background-color: transparent;
Also to make the nav bar go to top try putting it in div instead of nav.

I am trying to make a responsive nav bar

I have the idea of having the anchor tags show up when they're set to active and I have tried using JavaScript to access them and make them active when clicking on a div/button (I tried with button but it didn't work out.).
The problem is that nothing happens. I ran through my code and didn't find where I can be wrong.
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>
</body>
</html>
IndexStyle.css:
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
ResponsiveMenu.js:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})

Lets take this one step at a time, first lets look at the HTML. The center tag is no longer supported in HTML5 so I removed it. Second you had an extra quotation mark in your last anchor which I removed. In order to get all the links to show at once you should wrap them in a container. In this case a list makes the most sense. I have created a nav-list for you and wrapped all your anchor tags in an li tag.
As far as your CSS I noticed you were using .anchor:active which is a Pseudo class. This is not the same as having a class of anchor AND a class of active. If you want to select a class of anchor that also has a class of active you would use .anchor.active. In this case the active class is going on the nav-list so I style it using .nav-list.active
Now for the Javascript. Instead of using it to loop over all the anchor tags and setting them to active individually you can now just toggle the active class on your nav-list. This will make all the links appear at the same time.
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>

As I understood you want to make the nav items active on click here's some issues to fix
1- querySelector returns only the first element in the list, so here you have 5 elements with class of anchors so it'll return the first anchor tag with class of .anchors and therefore you need querySelectorAll
Read more about querySelector here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
And querySelectorAll in here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Briefly querySelectorAll returns a nodeList that you can treat as an array so you need to loop over this array and set the onclick event on each element like so
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) =>
link.addEventListener("click", (e) => {
e.target.classList.toggle("active");
})
);
2- you don't appear to have a class called active so classList.toggle would not work add this to your css
.active {
background-color: #ddd !important;
color: black;
}
3- you have a small bug in your html, the last anchor tag (a href="#"") notice that it has 2 double quotes for closing
4- with the previous code in (2) you'll notice being able to select multiple values which is not what we want therefore you should remove active class from all other anchor tags when 1 is active and you can achieve this with the following code
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
blur works when you're not focusing on the element anymore
check MDN here for more info https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
here's a working example
const toggleButton = document.querySelector(".dot_a");
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) => {
link.addEventListener("click", (e) => {
e.target.classList.add("active");
});
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
});
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.anchors {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.active {
background-color: #ddd !important;
color: black !important;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
display: none;
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ResponsiveMenu.js" defer></script>
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js"></script>
</head>
<body>
<center>
<nav class="nav">
<div class="dot_a" style="pointer-events: none;">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<a class="anchors" href="#"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="#"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card"></i> ЗА НАС</a>
</nav>
</center>
</body>

Javascript file not working when linking file to a html document

So I have a school project to make a website and I cannot link my javascript file properly. As seen in the code below, the javascript works fine, it is just the referencing. I have referenced the javascript file like this:
<script type="text/javascript" src="ContactUsPage.js"></script>
and it isn't working. if it helps, I am using Atom text editor.
const checkbox = document.querySelector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");
checkbox.addEventListener("change", function() {
const checked = this.checked;
for (const btn of btns) {
checked ? (btn.disabled = false) : (btn.disabled = true);
}
});
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 125.19px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Links inside the navbar */
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 126.4px;
background-color: inherit;
}
.box {
width: 1100px;
padding: 10px;
border : 5px solid #000000;
margin: 10;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 126.4px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/*
body{
background: #7f7df9;
}
.contact-us{
width: 250px;
background: #fff;
padding: 50px;
margin: 100px auto;
border-radius: 30px;
position: relative;
}
.title h1{
color: #535274;
letter-spacing: 5px;
margin-bottom: 25px;
text-align: center;
}
.form,
.form-items{
width: 100%;
}
.form-items .input{
width: 100%;
margin-bottom: 12px;
padding: 15px 40px;
box-sizing: border-box;
background: #ebeef1;
border: 0px;
outline: none;
border-radius: 30px;
}
.form-items .input.message{
height: 125px;
border-radius: 15px;
margin-bottom: 30px;
padding: 15px 15px;
resize: none;
}
.btn{
background: #827ffe;
text-align: center;
color: #fff;
padding: 12px;
border-radius: 25px;
cursor: pointer;
}
.btn .fas{
margin-left: 10px;
font-size: 12px;
}
.form-items{
position: relative;
}
.form-items .fas{
position: absolute;
top: 15px;
left: 15px;
color: #9a99aa;
}
.social-icons{
position: absolute;
bottom: -25px;
left: 50%;
width: 200px;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
}
.social-icons div{
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.social-icons div .fab{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
.social-icons div.facebook{
background: #5178d9;
}
.social-icons div.twitter{
background: #41caf6;
}
.social-icons div.google{
background: #fb4f4f;
}
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--white: #afafaf;
--red: #e31b23;
--bodyColor: #292a2b;
--borderFormEls: hsl(0, 0%, 10%);
--bgFormEls: hsl(0, 0%, 14%);
--bgFormElsFocus: hsl(0, 7%, 20%);
}
/* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
a {
color: inherit;
}
*/
input,
select,
textarea,
button {
font-family: inherit;
font-size: 100%;
}
button,
label {
cursor: pointer;
}
select {
appearance: none;
}
/* Remove native arrow on IE */
select::-ms-expand {
display: none;
}
/*Remove dotted outline from selected option on Firefox*/
/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/
/*We use !important to override the color set for the select on line 99*/
select:-moz-focusring {
color: transparent !important;
text-shadow: 0 0 0 var(--white);
}
textarea {
resize: none;
}
ul {
list-style: none;
}
body {
font: 18px/1.5 "Open Sans", sans-serif;
background: var(--bodyColor);
color: var(--white);
margin: 1.5rem 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form h1 {
margin-bottom: 1.5rem;
}
.my-form li,
.my-form .grid > *:not(:last-child) {
margin-bottom: 1.5rem;
}
.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
width: 100%;
line-height: 1.5;
padding: 15px 10px;
border: 1px solid var(--borderFormEls);
color: var(--white);
background: var(--bgFormEls);
transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form textarea {
height: 170px;
}
.my-form ::placeholder {
color: inherit;
/*Fix opacity issue on Firefox*/
opacity: 1;
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:enabled:hover,
.my-form button:focus,
.my-form input[type="checkbox"]:focus + label {
background: var(--bgFormElsFocus);
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
transform: scale(1.02);
}
.my-form *:required,
.my-form select {
background-repeat: no-repeat;
background-position: center right 12px;
background-size: 15px 15px;
}
.my-form *:required {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg);
}
.my-form select {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/down.svg);
}
.my-form *:disabled {
cursor: default;
filter: blur(2px);
}
/* FORM BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form .required-msg {
display: none;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg)
no-repeat center left / 15px 15px;
padding-left: 20px;
}
.my-form .btn-grid {
position: relative;
overflow: hidden;
transition: filter 0.2s;
}
.my-form button {
font-weight: bold;
}
.my-form button > * {
display: inline-block;
width: 100%;
transition: transform 0.4s ease-in-out;
}
.my-form button .back {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-110%, -50%);
}
.my-form button:enabled:hover .back,
.my-form button:focus .back {
transform: translate(-50%, -50%);
}
.my-form button:enabled:hover .front,
.my-form button:focus .front {
transform: translateX(110%);
}
/* CUSTOM CHECKBOX
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.my-form input[type="checkbox"] + label {
position: relative;
display: inline-block;
padding-left: 2rem;
transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
content: '';
position: absolute;
}
.my-form input[type="checkbox"] + label::before {
left: 0;
top: 6px;
width: 18px;
height: 18px;
border: 2px solid var(--white);
}
.my-form input[type="checkbox"]:checked + label::before {
background: var(--red);
}
.my-form input[type="checkbox"]:checked + label::after {
left: 7px;
top: 7px;
width: 6px;
height: 14px;
border-bottom: 2px solid var(--white);
border-right: 2px solid var(--white);
transform: rotate(45deg);
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
font-size: 1rem;
text-align: right;
backface-visibility: hidden;
}
footer a {
text-decoration: none;
}
footer span {
color: var(--red);
}
/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (min-width: 600px) {
.my-form .grid {
display: grid;
grid-gap: 1.5rem;
}
.my-form .grid-2 {
grid-template-columns: 1fr 1fr;
}
.my-form .grid-3 {
grid-template-columns: auto auto auto;
align-items: center;
}
.my-form .grid > *:not(:last-child) {
margin-bottom: 0;
}
.my-form .required-msg {
display: block;
}
}
#media screen and (min-width: 541px) {
.my-form input[type="checkbox"] + label::before {
top: 50%;
transform: translateY(-50%);
}
.my-form input[type="checkbox"]:checked + label::after {
top: 3px;
}
}
<html>
<link href="AboutUs.css" rel="stylesheet" type="text/css">
<head>
<img src="Final Logo.jpg" width="106" height="106">
<meta charset="UTF-8">
<title>choose one already</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> also this
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
About Us
<div class="dropdown">
<button class="dropbtn">Stories
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Jack and Jill
Cinderalla
,Mayuka
</div>
</div>
<a href="ContactUsPage.html" class="active" >Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<body style="background-color:#faecca">
<script type="text/javascript" src="ContactUsPage.js"></script>
<form class="my-form">
<div class="container">
<h1>Get in touch!</h1>
<ul>
<li>
<select>
<option selected disabled>-- Please choose an option --</option>
<option>Request Quote</option>
<option>Send Resume</option>
<option>Other</option>
</select>
</li>
<li>
<div class="grid grid-2">
<input type="text" placeholder="Name" required>
<input type="text" placeholder="Surname" required>
</div>
</li>
<li>
<div class="grid grid-2">
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone">
</div>
</li>
<li>
<textarea placeholder="Message"></textarea>
</li>
<li>
<input type="checkbox" id="terms">
<label for="terms">I have read and agreed with the terms and conditions.</label>
</li>
<li>
<div class="grid grid-3">
<div class="required-msg">REQUIRED FIELDS</div>
<button class="btn-grid" type="submit" disabled>
<span class="back">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/email-icon.svg" alt="">
</span>
<span class="front">SUBMIT</span>
</button>
<button class="btn-grid" type="reset" disabled>
<span class="back">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/eraser-icon.svg" alt="">
</span>
<span class="front">RESET</span>
</button>
</div>
</li>
</ul>
</div>
</form>
<footer>
<div class="container">
</small>
</div>
</footer>
</body>
</html>

IF YOU ARE HOSTING IT LOCALLY
I would make sure that you are providing the correct relative path of the js to the html file. That tends to be the most common problem. You may need to go to the parent folder before referencing the script location or do whatever fixes the relative path.
IF YOU ARE HOSTING IT ON A SERVER
I would make sure that you are accessing the correct endpoint to retrieve the CSS and js files. Looking at the web console when you load the page can be helpful. You would probably see FILE DNE errors.
I would also move the script import statement to the top of the document in the head. Not that it fixes your code, but it may help you avoid potential errors. Otherwise, I don't see anything strikingly wrong about your code.

I realised I put the javascript reference in the wrong area(at the top) as it was loading in before the checkbox was there. I fixed it by moving it to the bottom of the page.

Responsive menu not working on desktop

I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>

jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.