Hamburger menu responsiveness issue - javascript

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>

Related

How can I make an element's background transparent?

I cant make the background of some elements transparent for mobile view. I'm using React.
I tried to add background-color and background with value transparent to nearly every class, but it does not remove the background properly. Does anyone have suggestions how to fix this?
standard view:
mobile view:
js:
export const NavBar = () => {
return (
<nav className="flex custom-nav">
<ul className="nav-list flex">
<li>Home</li>
<li>Skills</li>
<li>Projects</li>
</ul>
<span className="social-icon-list">
<a href="#"><img className="social-icon" src={socialIcon1}
alt=""/></a>
<a href="#"><img className="social-icon" src={socialIcon2}
alt=""/></a>
</span>
<button>Let's Connect</button>
</nav>
);
}
css for my js file
* {
font-family: Centra, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none !important;
color: #fff !important;
font-weight: 400;
opacity: 0.85;
}
.flex {
display: flex;
gap: 1.5rem;
}
nav {
padding: 20px 50px 0 0;
justify-content: end;
align-items: center;
}
.nav-list {
list-style-type: none;
font-size: 1.5em;
align-items: center;
margin-top: auto;
padding: 0;
background-color: transparent;
}
button {
background-color: transparent;
border: 1px solid #fff;
padding: 18px 34px;
font-size: 1.3em !important;
flex-shrink: 0;
color: #fff;
opacity: 0.85;
}
.social-icon-list {
flex-shrink: 0;
}
.social-icon {
width: 42px;
border-radius: 50% !important;
margin-right: 6px;
background-color: white;
opacity: 0.85;
}
#media (max-width: 44em) {
.custom-nav {
position: fixed;
inset: 0 0 0 30%;
background: aqua;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 0;
margin: 0;
}
.nav-list {
flex-direction: column;
padding: min(25vh, 5rem) 0 0 0;
margin: 0;
gap: 1rem;
}
button {
margin: 0;
}
}
css for the whole app
* {
background-color: #262626;
}

Your problem is in here:
* {
background-color: #262626;
}
This sets the background color of absolutely everything, so you'd have to overwrite it for absolutely everything.
If you want a "global" background, only set that on your root element. Generally, html or body are excellent containers for that:
body {
background-color: #262626;
}

Css is not doing what it intended for and I checked it again but can't find a problem

import React , {useState} from "react";
import Hamburger from "hamburger-react"
export default function Nav() {
const [isExpended , setIsExpended] = useState(false)
return(
<nav className="navigation">
WebName
<button onClick={() => {
setIsExpended(!isExpended)
}}
className="hamburger"><Hamburger /></button>
<div className={isExpended?"navigation-menu.expended":"navigation-menu"}>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</nav>
)
}
Css
.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}
.brand-name {
text-decoration: none;
color: black;
font-size: 1.3rem;
margin-left: 1rem;
}
.navigation-menu {
margin-left: auto;
}
.navigation-menu ul {
display: flex;
padding: 0;
}
.navigation-menu li {
list-style-type: none;
margin: 0 1rem;
}
.navigation-menu li a {
text-decoration: none;
width: 100%;
justify-content: stretch;
}
.hamburger{
border: 0;
border-radius: 20%;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
display: none;
}
#media screen and (max-width:700px) {
.navigation-menu ul{
display:none;
}
}
#media screen and (max-width:700px){
.hamburger{
display: block;
}
}
this is the code that is not working other are working fine but when size changed Hamburger do comes but navigation-menu doesn't style and just appear there
#media screen and (max-width:700px){
.navigation-menu ul{
flex-wrap: wrap;
position: absolute;
top: 60px;
left: 0;
flex-direction: column;
width: 100%;
height: calc(100vh - 77px);
background-color: #fff;
border-top: 1px solid black;
}
.navigation-menu li{
text-align: center;
margin: 0;
}
.navigation-menu li a{
color: black;
width: 100%;
padding: 1.5rem 0;
}
.navigation-menu li:hover{
background-color: #eee;
}
i try instead of class Name I use there tag name but result was still the same i don't know where my code gone wrong everyother thing is working as intended
}
#media screen and (max-width:700px){
.navigation-menu ul{
display: none;
}
}
#media screen and (max-width:700px){
.navigation-menu-expended ul{
display: block;
}
}

Hamburger menu not opening after click

I made my menu to shrink into hamburguer style on
max-width: 500px;
I added javascript to close it after clicking a link and it works fine, but after the first link has been click, to open it again, tha hamburguer icon doesn't work but you have to click where the menu links are supposed to be (even without displaying).
var nav = 1;
function navMenu() {
if (nav === 1) {
document.getElementById("showmenu").style.opacity = 0;
nav = 0;
} else if (nav === 0) {
document.getElementById("showmenu").style.opacity = 1;
nav = 1;
}
}
.nav {
justify-content: flex-end;
text-align: right;
height: 50px;
line-height: 50px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: calc(12px + .2vw);
width: 100%;
box-sizing: border-box;
}
.menu {
display: block;
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: #828282;
margin: 0 20px;
line-height: 50px;
}
label {
margin: 0 0 0 0;
font-size: 25px;
line-height: 50px;
display: none;
margin: 0 20px;
text-align: right;
}
#toggle {
display: none;
}
#media screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.nav {
margin-right: 0;
}
.menu {
text-align: center;
width: 100%;
display: none;
box-sizing: border-box;
background-color: #000000;
}
.menu a {
display: block;
border-bottom: 1px solid #D736A6;
margin: 0;
}
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu" id="showmenu" onclick="navMenu()">
Home
About
Skills
Work
Contact
</div>
</div>

<div class="menu" id="showmenu" onclick="clickAnyAreaOnMenu();">
Home
About
Skills
Work
Contact
</div>
<script>
function clickAnyAreaOnMenu() {
let toggle = document.getElementById("toggle");
toggle.checked = false;
}
</script>

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
}

Categories

Resources