modal does not display with side navbar overlap

modal does not display with side navbar overlap - javascript

I am at my wits end trying to figure out how to make the sign in modal
mobile responsive and continue to show display when the screen is down
to 320x568.
Here is the modal html
<body>
<div class="navbar-fixed">
<nav style="background-color: white;">
<div class="nav-wrapper">
<!-- Logo goes here -->
<a [pphref="index.html" class="brand-logo right">
<img class="responsive-img" src="../assets/images/HG3.png">
</a>
<!-- Collapsable menu is here -->
<a href="#" data-activates="mobile-demo" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="left hide-on-med-and-down">
<li class="active">
Home
</li>
<li>
Contact Us
</li>
<li>
Favorites
</li>
<li>
<!-- Modal Trigger, the 'href' points to the Modal Structure -->
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signInBtn">Sign In</a>
<a class="waves-effect waves-light loginbtn btn modal-trigger" data-toggle="modal" href="#login-modal" id="signOutBtn">Sign Out</a>
<!-- Modal Structure -->
<div class="modal fade" id="login-modal" tabindex="-1" data-toggle="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
Here is CSS. Media queries are set at min-width. I'm not sure if I need to change the z-index and change things around that way.
nav ul a,
nav .brand-logo {
color: #444;
}
p {
line-height: 2rem;
}
/* This css is for the .main class */
#main {
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.main-container {
background-color: #f8f8f8;
position: relative;
left: 0;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.container {
width: 100%;
max-width: 1440px;
position: relative;
margin: 0 auto;
padding: 0 20px
}
#media screen and (min-width:840px) {
.container {
padding: 0 40px
}
}
.hero {
background-position: center center;
background-size: cover;
background-image: url("../images/greenjuice.jpg");
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
overflow: hidden;
height: 100vh;
-webkit-transition: left .2s ease-in-out;
transition: left .2s ease-in-out
}
.hero .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.hero h1 {
width: 100%;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25)
}
#hero {
position: fixed;
top: 65px;
left: 0;
right: 0;
z-index: 1
}
#after-hero {
margin-top: 100vh
}
.wf-active #hero .tag {
-webkit-animation: opacity 1s ease;
animation: opacity 1s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.wf-active #hero h1 {
-webkit-animation: opacity 2s ease .25s;
animation: opacity 2s ease .25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.hero--generic {
background-image: url("../images/greenjuice.jpg");
padding-top: 100px;
padding-bottom: 100px;
height: auto;
min-height: 400px
}
.hero--generic h1 {
font-size: 48px
}
#media screen and (min-width:840px) {
.hero--generic h1 {
font-size: 700px
}
}
.hero--index {
background-image: url("../images/greenjuice.jpg")
}
.hero--index h1 {
margin-bottom: .6em
}
.hero--index h1 {
color: rgb(17, 22, 31)
}
.hero--index h3 {
font-size: 48px;
color: whitesmoke;
margin-bottom: 1em;
text-shadow: -2px 2px 10px rgba(55, 55, 55, 0.25);
line-height: 1.2em
}
.responsive-img {
height: 100px;
width: 100%
}
#media screen and (min-width:0) and (max-width:479px) {
.hero--index h3 {
display: none
}
}
.hero--index .tag {
color: #717f81
}
/* Css for .panel */
.panel {
position: relative;
z-index: 15;
}
#media screen and (min-width:840px) {
.panel--solutions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
}
.solution {
background-size: cover;
overflow: hidden;
color: #656565
}
#media screen and (min-width:840px) {
.solution {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 50%;
height: auto
}
}
#media screen and (min-width:840px) {
.solution:before {
float: left;
padding-top: 100%;
content: ""
}
}
.solution__container {
background-color: rgba(255, 255, 255, 0.801);
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* padding:350px 200px; */
width: 100%;
margin: 200px 0px;
/* margin-bottom: auto; */
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease
}
#media screen and (min-width:1200px) {
.solution__container {
padding: 100px 80px
}
}
#media screen and (min-width:1600px) {
.solution__container {
padding: 100px
}
}
#media screen and (min-width:840px) {
.solution__container:hover,
.solution__container:focus {
background-color: transparent
}
}
#media screen and (min-width:840px) {
.solution__container:hover .solution__inner,
.solution__container:focus .solution__inner {
background-color: rgba(255, 255, 255, 0.904);
border-color: transparent
}
}
.solution__container p {
width: 100%;
text-align: center
}
.solution__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
-webkit-transition: all .6s ease;
transition: all .6s ease
}
#media screen and (min-width:840px) {
.solution__inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
/* justify-content:center; */
padding: 40px;
border: 2px dashed #188138
}
}
.solution__inner * {
text-align: center
}
.solution__header {
font-size: 30px;
color: #188138
}
#media screen and (min-width:840px) {
.solution__header {
font-size: 40px
}
}
.solution__body {
margin: 20px auto 30px;
font-size: 16px
}
#media screen and (min-width:840px) {
.solution__body {
font-size: 18px
}
}
.solution--ordering {
background-image: url()
}
.solution--category {
background-image: url()
}
.solution__icon {
margin-bottom: 30px
}
/* End of main container css */
/* Start of footer css */
footer {
position: relative;
z-index: 16;
color: #fff;
overflow: hidden
}
.panel--learn-more {
background-color: #05180ae1;
overflow: hidden;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease
}
#media screen and (min-width:840px) {
.panel--learn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 158px
}
}
.panel--learn-more:hover,
.panel--learn-more:focus {
background-color: #082505
}
.learn-more__header {
font-size: 40px;
margin: 40px 20px;
text-align: center;
text-transform: none
}
#media screen and (min-width:840px) {
.learn-more__header {
margin: 0 auto;
font-size: 35px
}
}
.learn-more__link {
font-style: italic;
text-decoration: none
}
#media screen and (min-width:0) and (max-width:839px) {
.learn-more__link {
display: block
}
.solution__container {
padding: 0px;
}
}
.learn-more__link:hover,
.learn-more__link:focus {
text-decoration: none
}
.footer__bottom {
background-color: #233c23;
overflow: hidden
}
.footer__bottom .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 190px
}
#media screen and (min-width:840px) {
.footer__bottom .container {
height: 100px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
}
.footer__navigation {
margin: 0 auto;
padding: 0;
font-size: 18px;
text-align: center
}
#media screen and (min-width:840px) {
.footer__navigation {
margin: 0 30px
}
}
.footer__navigation a {
color: #fff
}
.footer__navigation a:hover,
.footer__navigation a:focus {
color: #fff
}
.footer__item {
display: inline-block;
padding: 0 12px 6px
}
#media screen and (min-width:840px) {
.footer__item {
padding: 0 20px
}
}
.footer__item__link {
text-decoration: none
}
.footer--social {
margin: 0 auto 20px;
padding: 0;
text-align: center
}
#media screen and (min-width:840px) {
.footer--social {
margin: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
}
.footer__social-link {
padding: 0 8px
}
.footer__social-link .icon {
width: 48px;
height: 48px;
fill: #7e7e7e
}
.footer__social-link .icon:hover,
.footer__social-link .icon:focus {
fill: #ccc
}
.footer-background {
background-color: #f8f8f8;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 0;
opacity: 0
}
.page-bottom .footer-background {
opacity: 1
}
/* End of footer css. */
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(255, 255, 255, .9);
overflow: visible;
}
.parallax-container .section {
width: 100%;
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin: 0;
}
.materialboxed {
width: 30%;
margin: auto;
float: left;
}
.brand-logo {
width: 10%;
opacity: 0.8;
}
.carousel {
overflow: visible;
}
.carousel .carousel-item {
width: 300px;
height: 300px;
}
.modal-body {
color: black;
}
.loginbtn {
background-color: #062605;
}
.btn {
background-color: #032504;
}
.btn:hover,
.btn-large:hover {
background-color: #1B5E20;
}
.btn:focus,
.btn-large:focus,
.btn-floating:focus {
background-color: rgb(7, 31, 8);
}
/* CSS for modal. */
#login_register_btn {
float: left;
margin-left: 5px;
}
#login_lost_btn {
float: left;
}
#login-btn {
float: left;
margin-right: 5px;
}
#register_login_btn {
float: left;
}
#register-btn {
float: left;
margin-right: 5px;
}
.modal {
display: none;
position: fixed;
left: 0;
right: 0;
background-color: #fafafa;
padding: 0;
/* max-height: 70%; */
max-height: 59%;
width: 55%;
margin: auto;
overflow-y: hidden !important;
border-radius: 2px;
will-change: top, opacity;
}
.modal-overlay {
z-index: 0;
}
.modal .modal-content {
padding: 24px;
margin-bottom: 69px;
}
/* End CSS for Modal. */
#media only screen and (max-width: 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
/* This css is for the .main class */
}
#media only screen and (max-width: 600px) {
#index-banner .section {
top: 0;
}
}

Related

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
var req = new XMLHttpRequest();
var url = "https://api.nasa.gov/planetary/apod?api_key=";
var api_key = "Q6LCLptEevXBK9pvwj1GeEsPbM4mmv6ywTmfw0Nc";
req.open("GET", url + api_key);
req.send();
req.addEventListener("load", function() {
if (req.status == 200 && req.readyState == 4) {
var response = JSON.parse(req.responseText);
document.getElementById("title").textContent = response.title;
document.getElementById("date").textContent = response.date;
document.getElementById("pic").src = response.hdurl;
document.getElementById("explanation").textContent = response.explanation;
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: darkred;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.btnclick {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Content CSS */
.main {
background-color: #131313;
}
.main__container {
display: grid;
grid-template-columns: auto auto;
align-items: Left;
justify-self: Left;
margin: 100px;
height: 90vh;
background-color: #131313;
z-index: 1;
width: 100%;
max-width: 1300px;
padding-right: 0px;
padding-left: 0px;
}
.main__content {
color: #fff;
width: 100%;
}
.main__content h1 {
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h2 {
font-size: 4rem;
margin-top: 10px;
background-color: #ff8177;
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
.main__img--container {
text-align: center;
}
#main__img {
height: 80%;
width: 80%;
}
/* Mobile Responsive */
#media screen and (max-width: 768px) {
.main__container {
display: grid;
grid-template-columns: auto;
align-items: center;
justify-self: center;
width: 100%;
margin: 0 auto;
height: 90vh;
}
.main__content {
text-align: center;
margin-bottom: 4rem;
}
.main__content h1 {
font-size: 2.5rem;
margin-top: 2rem;
}
.main__content h2 {
font-size: 3rem;
}
.main__content p {
margin-top: 1rem;
font-size: 1.5rem;
}
}
#media screen and (max-width: 480px) {
.main__content h1 {
font-size: 2rem;
margin-top: 3rem;
}
.main__content h2 {
font-size: 2rem;
}
.main__content p {
margin-top: 2rem;
font-size: 1.5rem;
}
.main__btn {
padding: 12px 36px;
margin: 2.5rem 0;
}
}
/* Services Section */
.services {
background: #131313;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #ff8177;
background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.6) 100%), url('/images/pic3.jpg');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.9) 100%), url('/images/pic4.jpg');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* Footer CSS */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items>h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.social__icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social__logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
</head>
<body style="background-color:#131313;">
<div class="grid-container">
<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
</ul>
</div>
</nav>
</div>
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nick</p>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title" /h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="30%">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
text-align: Left;
padding: 20px 0;
font-size: 30px;
}
</style>
<body style="background-color:#131313;">
<div class="grid-container">
<div class="item1">
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nikunj Patel</p></div>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title"></h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
<p id="explanation"></p>
</div>
</div>
</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<script src="app.js"></script>
</body>
</html>
So why does the first html produce an image and the second doesnt but both return the Error:
(Both HTMLs use the same CSS and Js files)
"{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'textContent')",
"filename": "https://stacksnippets.net/js",
"lineno": 680,
"colno": 56
}"
i want to use the formatting of this second html file instead of the first and i was surprised no image was produced

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>

First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>

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.

How to fix this nav menu burger button?

I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>

If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>

Javascript Toggle class working but class not effective in element in dropdown

I frequently get these particular type of error in my code constantly which I will add a toggle function to the classList of an element with JavaScript and the code will toggle the class if I checked using the inspect element, but the class won't be effective to the element I add it to....
NOW MY PROBLEM IS :
In the code below at the media queries (max-width: 605px), I am trying to make a dropdown navigation. I added display:none to the #navbarp in the CSS and I added another class .open #navbarp { display:flex}, and I used the JavaScript to toggle the .open class. The JavaScript was toggling the class .open to the #navbarp but the CSS class wasn't effective -- the display: none wasn't changing to display:flex.
Please go to the link below to check the code
https://codepen.io/enipx/pen/zegJeP
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
height: 0;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
overflow: hidden;
}
.open #navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Change .open #navbarp to #navbarp.open (no space between #navbarp and .open). The former targets an element with id navbarp whose parent has the class .open. Using the latter (with no space) targets the element with both the ID and the class.
Remove the height: 0 and the overflow: hidden. These are making the elements disappear, even though display: flex is being applied. You shouldn't need them, because you have display: none which makes them totally disappear when they are supposed to be hidden.
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
.open#navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Selector in CSS part for the case when #navbarp has open class is written wrong. Currently, it is saying for any children of the parent that has class open and id equal navbarp apply this rule (like here https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator). While the intent is that element over which rule should be applied, should contain has both id equal navbarp and class open.
So changing, .open #navbarp to .open#navbarp will fix an issue.

Better to use only one class for everything
const The_NavBar = document.getElementById('navbar');
document.getElementById('icon-p').onclick = function()
{
The_NavBar.classList.toggle('navOpen')
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
#navbar.navOpen #icon-p span:nth-child(1) {
transform: rotate(45deg) translate(9px, 7px);
}
#navbar.navOpen #icon-p span:nth-child(2) {
opacity: 0;
}
#navbar.navOpen #icon-p span:nth-child(3) {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
#navbar.navOpen #navbarp {
/* .open#navbarp */
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p">
<span></span>
<span></span>
<span></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Homes</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Develop Reference

JavaScript is the programming language of the Web.

modal does not display with side navbar overlap - javascript

Related

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

Hamburger button is not on the right place

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

How to fix this nav menu burger button?

Javascript Toggle class working but class not effective in element in dropdown

Categories

Resources