Develop Reference

I can't fix my bottom menu in any way on Chrome (while on FIrefox works perfectly)

I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});

You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>

Responsive Navigation Hamburger Menu not working

I'm trying to make my navigation responsive but when i tried to resize my window, my hamburger doesn't allow the dropdown function to work. I took both the navigation and responsive hamburger online so is there somewhere that might be overwriting the hamburger ?
This is my HTML
<header>
<div class="logo">
<p>LEGEND</p>
<div class= "hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
This is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a, button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
This is my css when it's responsive
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-botton: 12px;
}
}
This is my javascript
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onClick = function() {
navBar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
}
</script>

UPDATE
I revised the solution so that the 2 blocks are for:
In small screen but active is not on
In small screen and active is on
This separation protects the style from broken when transition happen as active toggles.
More styles can be added to the first block to define how this list should look like, such as making it display the list in column.
Example:
.nav-bar ul {
display: flex;
flex-direction: column;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
Original
This is because your JS code has some syntax error. Here is what to do:
Use const to declare hamburger and navbar.
Call addEventListener on hamburger to add the function for toggling class of navbar
Follow the below example to revise your code, or visit a live demo of it fixed here: codepen
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
Hope this solution will help.

Your code has nothing wrong, just few typos in your JavaScript:
You have onClick instead of onclick
navbar instead of navBar at navbar.classList.toggle("active")
Corrected version
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
Extra (Change display: block; to display: grid; in .nav-bar ul selector in CSS media query to display dropdown in vertical list)
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Better Solution
Quote from MDN Web Docs, as in this link:
The recommended mechanism for adding event handlers in web pages is the addEventListener() method
You may use addEventListener() to achieve the same result:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Alternate Solution
For readers who are more familiar to add() / remove(), here's some alternatives:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>

Hamburger menu responsiveness issue

I am trying to make a hamburger menu, in which when a screen with more than 600px is used the hamburger menu is show in the form of a navbar and if the screen is smaller than 600px then it is shown as a hamburger menu.
I did the coding and the menu works perfectly as intended. However, once the menu is toggled and then toggled off, and the screen size is increased, the navbar appears out of its place.
This is when the website loads ^
This happens when the hamburger is used and the screen size is increased.
Also, this was my first try at hamburger menu's I did it on my own, if possible then can you share some references from which I can learn.
Here is the HTML
<header>
<h2>Hamburger Menu => </h2>
<nav>
<ul class="navbar">
<li>Home</li>
<li>Google</li>
<li>Youtube</li>
<li>Stackoverflow</li>
</ul>
<div class="cross"><i class="fas fa-times"></i></div>
<div class="hamburger"><i class="fas fa-bars"></i></div>
</nav>
</header>
Here is the CSS
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
/* header */
header{
width: 100%;
min-height: 70px;
display: flex;
justify-content: space-between;
background: #000033;
color: #ff3300;
align-items: center;
}
h2{
margin: 0 0 0 1rem;
text-shadow: 1px 1px 1px #ffad99;
}
/* navbar */
.navbar{
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
margin: 0 1rem 0 0;
}
/* links */
li{
list-style: none;
}
a{
color: #ff3300;
text-decoration: none;
text-shadow: 1px 1px 4px #ffad99;
box-sizing: border-box;
}
a:hover{
box-sizing: border-box;
font-weight: bold;
text-shadow: 1px 1px 1px #ffad99;
}
/* cross */
.cross{
display: block;
margin: 0 2rem 0 0;
font-size: 1.5em;
cursor: pointer;
}
.cross{
display: none;
}
/* hamburger */
.hamburger{
display: none;
}
/* media query for mobile */
#media(max-width:600px){
.navbar{
/* display: none; */
position: absolute;
width: 100vw;
transform: translateX(-189%);
top: 20vh;
transition-duration: 2s;
flex-direction: column;
background: #000;
height: 100vh;
box-sizing: border-box;
}
li{
margin: 0.4em 0.4rem ;
padding: 0.9rem 5rem;
border-bottom: 2px solid #fff;
border-radius: 3px;
box-sizing: border-box;
}
.hamburger{
display: block;
margin: 0 2rem 0 0;
font-size: 1.5em;
cursor: pointer;
}
}
/* js classes */
.show{
display: block;
}
.hide{
display: none;
}
And here is the JAVASCRIPT
// * variables
const hamburger = document.querySelector('.hamburger');
const cross = document.querySelector('.cross');
const menu = document.querySelector('.navbar');
// functions
const showNav = () => {
menu.style.transform = 'translateX(-89%)';
}
const hideNav = () => {
menu.style.transform = 'translateX(-189%)'
}
// hamburger click event
hamburger.addEventListener('click', () => {
hamburger.classList.add('hide')
hamburger.classList.remove('show')
cross.classList.remove('hide')
cross.classList.add('show')
showNav();
});
cross.addEventListener('click', () => {
cross.classList.remove('show')
cross.classList.add('hide')
hamburger.classList.remove('hide')
hideNav();
});
All answers will be greatly appreciated.
I Would like to tell my problem again,
When the hamburger menu is used and then closed and after that if the screen is resized to be greater than the #media value, it messes up the navbar. Can I get a fix to this please?
my code is a little inefficient I am pretty new to javascript so an answer with basic syntax will be greatly appreciated.

It is because the transform that is getting applied in showNav() is still there so the ul element will always be shifted to the left after calling the function.
One way to solve this is to instead make a .show-nav inside the #media after the .navbar:
#media (max-width: 600px) {
.navbar {
...
}
.show-nav {
transform: translateX(-89%);
}
...
}
Then update the show and hide functions to just add and remove that class:
const showNav = () => {
menu.classList.add('show-nav')
}
const hideNav = () => {
menu.classList.remove('show-nav')
}
Here is a working example with the suggested changes:
// * variables
const hamburger = document.querySelector('.hamburger')
const cross = document.querySelector('.cross')
const menu = document.querySelector('.navbar')
// functions
const showNav = () => {
menu.classList.add('show-nav')
}
const hideNav = () => {
menu.classList.remove('show-nav')
}
// hamburger click event
hamburger.addEventListener('click', () => {
hamburger.classList.add('hide')
hamburger.classList.remove('show')
cross.classList.remove('hide')
cross.classList.add('show')
showNav()
})
cross.addEventListener('click', () => {
cross.classList.remove('show')
cross.classList.add('hide')
hamburger.classList.remove('hide')
hideNav()
})
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
}
/* header */
header {
width: 100%;
min-height: 70px;
display: flex;
justify-content: space-between;
background: #000033;
color: #ff3300;
align-items: center;
}
h2 {
margin: 0 0 0 1rem;
text-shadow: 1px 1px 1px #ffad99;
}
/* navbar */
.navbar {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
margin: 0 1rem 0 0;
}
/* links */
li {
list-style: none;
}
a {
color: #ff3300;
text-decoration: none;
text-shadow: 1px 1px 4px #ffad99;
box-sizing: border-box;
}
a:hover {
box-sizing: border-box;
font-weight: bold;
text-shadow: 1px 1px 1px #ffad99;
}
/* cross */
.cross {
display: block;
margin: 0 2rem 0 0;
font-size: 1.5em;
cursor: pointer;
}
.cross {
display: none;
}
/* hamburger */
.hamburger {
display: none;
}
/* media query for mobile */
#media (max-width: 600px) {
.navbar {
/* display: none; */
position: absolute;
width: 100vw;
transform: translateX(-189%);
top: 20vh;
transition-duration: 2s;
flex-direction: column;
background: #000;
height: 100vh;
box-sizing: border-box;
}
.show-nav {
transform: translateX(-89%);
}
li {
margin: 0.4em 0.4rem;
padding: 0.9rem 5rem;
border-bottom: 2px solid #fff;
border-radius: 3px;
box-sizing: border-box;
}
.hamburger {
display: block;
margin: 0 2rem 0 0;
font-size: 1.5em;
cursor: pointer;
}
/* js classes */
.show {
display: block;
}
.hide {
display: none;
}
}
<header>
<h2>Hamburger Menu =></h2>
<nav>
<ul class="navbar">
<li>Home</li>
<li>Google</li>
<li>Youtube</li>
<li>Stackoverflow</li>
</ul>
<div class="cross"><i class="fas fa-times"></i>X</div>
<div class="hamburger"><i class="fas fa-bars"></i>|||</div>
</nav>
</header>

How do I get my Body to be all black? Some of it is Grey?

https://gx0st.com
So, if you guys check that, at least on my resolution 1920x1080. It has grey at the bottom, so it isn't fitting all the way. And if you check https://gx0st.com/contact.html you will see the same. If you guys could please help a noobie, I'd appreciate it. I just want it to be all black, and fit.
If you guys have any recommendations too on how to optimize it for mobile, that'd be fun. I will look into that anywho. But thanks to anyone who helps me with the first problem. <3
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="page-wrapper">
<header id="header">
<div class="logo">
</div>
<nav id="nav-bar">
<ul>
<li><b>Youtube</b></li>
<li><b>Contact</b></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<form id="form"
action="mailto:godislove1427#gmail.com">
<input
name="email"
id="email"
type="email"
placeholder="Email Address"
required/>
<input id="submit" type="submit"
value="HQ" class="btn" /></input></form>
</section>
</section>
<section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/mjq6kZSwTmI"
frameborder="0"
allowfullscreen></iframe></section>
<section id="pricing">
<div class="product" id="tenor">
<ul>
</div>
</section>
<footer>
<span>Copyright 2018, Ghost Robles</span>
</footer>
</div>
</div>
</html>
<style>
#font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
title {text-align: center;
font-family: "vcr_osd_mono-webfont";}
h2 {text-align: center;
font-family: "vcr_osd_mono-webfont";}
p {text-align: center;
color: purple;
font-family: "vcr_osd_mono-webfont";}
nav {text-align: center;}
body {background-color: rgb(0, 0, 0);
cursor: url(http://cur.cursors-4u.net/toons/too-3/too297.cur), auto;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: rgb(255, 2, 2);
text-decoration: none;
font-size: 35px;
font-family: "vcr_osd_mono-webfont";
}
/** global classes styling **/
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px rgb(255, 0, 0) solid;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgb(0, 0, 0);
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
nav li {
padding-bottom: 5px;
}
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 50px;
}
#hero > h2 {
margin-bottom: 20px;
word-wrap: break-word;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
#hero input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #c300ffea;
}
#media (max-width: 650px) {
#hero {
margin-top: 120px;
}
}
#features {
margin-top: 30px;
}
#media (max-width: 550px) {
#features .icon {
display: none;
}
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
#media (max-width: 550px) {
#features .desc {
width: 100%;
text-align: center;
padding: 0;
height: 150px;
}
}
#media (max-width: 650px) {
#features {
margin-top: 0;
}
}
#how-it-works {
margin-top: 50px;
display: flex;
justify-content: center;
}
#how-it-works > iframe {
max-width: 560px;
width: 100%;
}
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product > .level {
background-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
.product > button:hover {
background-color: rgb(0, 0, 0);
transition: background-color 1s;
}
#media (max-width: 800px) {
#pricing {
flex-direction: column;
}
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}
footer {
margin-top: 30px;
background-color: rgb(0, 0, 0);
padding: 20px;
}
footer > ul {
display: flex;
justify-content: flex-end;
}
footer > ul > li {
padding: 0 10px;
}
footer > span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: rgb(255, 0, 0);
}
::placeholder {text-align: center;}
.btn {color: rgb(255, 255, 255);}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137617043-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137617043-2');
</script>
</html>
**Contact.HTML**
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
<!-- START NAV -->
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
HQ
</li>
</ul>
</nav>
<!-- END NAV -->
<!-- START CONTACT SECTION -->
<body>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Let's work together!</h2>
</div>
<div class="contact-links">
<a
href="https://www.instagram.com/ghostrobles"
target="_blank"
class="btn contact-details"
><i class="fab fa-instagram"></i> Instagram</a
>
<a
id="profile-link"
href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
target="_blank"
class="btn contact-details"
><i class="fab fa-youtube"></i> Youtube</a
>
<a
>
<a href="mailto:godislove1427#gmail.com" class="btn contact-details"
><i class="fas fa-at"></i> Gmail</a
>
</div>
</section>
</body>
<!-- END CONTACT SECTION -->
<!-- START FOOTER SECTION -->
<footer class="site-footer">
<div id="footer-content">
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
©Ghost Robles>
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA" target="_blank"
>©Ghost Robles
</a>
</p>
<!-- END FOOTER SECTION -->
</footer>
<style>
#font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
/* Custom properties/variables */
:root {
--main-white: #ff0000;
--main-red: #000000;
--main-blue: #000000;
--main-gray: #000000;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 62.5%;
scroll-behavior: smooth;
}
/* A few media query to set some font sizes at different screen sizes.
* This helps automate a bit of responsiveness.
* The trick is to use the rem unit for size values, margin and padding.
* Because rem is relative to the document font size
* when we scale up or down the font size on the document
* it will affect all properties using rem units for the values.
*/
/* I am using the em unit for breakpoints
* The calculation is the following
* screen size divided by browser base font size
* As an example: a breakpoint at 980px
* 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
#media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
#media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
#media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */
body {
font-family: "vcr_osd_mono-webfont";
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: rgb(108, 6, 204);
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}
/* nav */
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
}
#media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background: var(--main-blue);
}
/* Welcome section */
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: var(--main-red);
}
/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
border-bottom: 0.2rem solid var(--main-white);
}
#media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
/* "Automagic" image grid using no media queries */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
#media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(--main-red);
}
.btn-show-all:hover > i {
transform: translateX(2px);
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
/* Contact section */
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--main-gray);
}
.contact-section-header > h2 {
font-size: 6rem;
}
#media (max-width: 28.75em) {
.contact-section-header > h2 {
font-size: 4rem;
}
}
.contact-section-header > p {
font-style: italic;
}
.contact-links {
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 2.4rem;
text-shadow: 2px 2px 1px #000000;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
}
/* Footer */
footer {
font-weight: 300;
display: default;
justify-content: space-evenly;
padding: 2rem;
background: var(--main-gray);
border-top: 4px solid var(--main-red);
}
footer > p {
margin: 2rem;
}
footer i {
vertical-align: middle;
}
#media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
.site-footer {
background: rgb(0, 0, 0);
}
#footer-content {
background: rgb(0, 0, 0);
}
</style>

To make the black fill all the page, just type at the css:
html, body{
height: 100vh;
}
body{
z-index: -1;
}
And change the z-index of the nav to 1.

You can always provide a background color to the body element
body{
background-color: black;
}
This color should persist through window resizing as well

I think that just setting the body height to 100% will fix it.
CSS:
html, body{
height: 100%;
background-color: black;
}

The reason for that is that the content you've added and the way you style it does not fill the entire screen, therefore the color ends where your 'last element' is placed.
setting height: 100vh will make the height of the element the same as the height of the screen itself. Avoid setting heights in the body, your webpage might grow and that will become a problem.

why the height of my sticky navbar disappear when I scroll?

I'm trying to build a website with a sticky nav bar in JavaScript. For the first load of the page everything is okay. But when I scroll, the navbar is flickering and after this the body up (see the pictures). I don't know why.
Just after the navbar I have slideshow and because of this the pictures are cut by the navbar and I'm on the top of the page.
See my code too below...
/*sticky_navbar*/
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin: auto;
}
/* Style the navbar */
#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 1);
z-index: 2;
}
#Title {
margin: 0 auto 0 0;
height: 20px;
margin-top: 20px;
padding-left: 10px;
border-bottom: 1px solid white;
padding-top: 10px;
padding-bottom: 35px;
flex: 1;
}
#navbar {
overflow: hidden;
background: rgba(139, 139, 157, 0);
display: flex;
justify-content: flex-end;
border-bottom: 5px solid white;
padding-bottom: 20px;
padding-top: 20px;
}
.menu:nth-child(1) {
order: 1;
}
.menu:nth-child(2) {
order: 4;
}
.menu:nth-child(3) {
order: 3;
}
.menu:nth-child(4) {
order: 2;
}
.menu:nth-child(5) {
order: 5;
}
IMG.background {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 60%;
}
#navbar a {
display: block;
color: #FFF;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background: rgba(217, 78, 68, 0.5);
color: white;
}
.content {
padding: 16px;
color: #ddd;
background-color: #FFF
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
/*END NAVBAR*/
#display {
display: flex;
}
<div id="header">
<div id="Title">
<img src="IMAGES/PNG/logo.png" alt="logo" />
</div>
<div id="navbar">
<div class="menu"> <a class="active" href="javascript:void(0)">Blog</a></div>
<div class="menu"> Contact</div>
<div class="menu"> L'électrophotonique</div>
<div class="menu"> Qui sommes nous?</div>
</div>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
</div>

the body jump to another position because your navbar has height of at least 86px but you gave .sticky+.content only padding-top of 60px.
maybe you can use position: sticky; instead? https://caniuse.com/#feat=css-sticky
or
to prevent flickering give the navbar onload the position fixed
#navbar {
overflow: hidden;
background: rgba(139, 139, 157, 0);
display: flex;
justify-content: flex-end;
border-bottom: 5px solid white;
padding-bottom: 20px;
padding-top: 20px;
position: fixed;
top: 0;
width: 100%;
}
.content {
padding: 60px 16px 16px 16px;
color: #ddd;
background-color: #FFF
}