Develop Reference

Responsive Navigation Hamburger Menu not working

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

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

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

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

Adding multiple dropdown menu's next to each other using JS, HTML and CSS

I am trying to get multiple dropdown menu's next to each other, however I am running into a problem. I have the two categories I want to have as dropdown in the header, however only 1 of them seems to work. With the non-working dropdown menu nothing happens when I click on it.
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>

querySelector will pick up the first matching element, whereas querySelectorAll will get a collection of all matching elements. You need to iterate through the elements to apply the listener. This solution clears out any open nav menus when the other is clicked. Also, it makes use of the [...] spread operator to iterate through elements. I added a new class navitem so that each submenu would show where it should.
let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
[...list].forEach(el => el.classList.remove('newlist')); // reset
e.target.parentNode.querySelector('.list').classList.toggle('newlist');
// this also works
//e.target.nextElementSibling.classList.toggle('newlist');
}
[...click].forEach(el => el.addEventListener("click", showSub));
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.navitem {
width: 150px;
display: inline-block;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class='navitem'>
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
<div class='navitem'>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
</div>

The way querySelector works, is it returns the first matching DOM element. In your case, because you use the click class for both buttons, the listener is only attached to the first one. Check out relevant documentation (at the return value header).
In this case I would suggest either using two classes and adding listeners to both separately, or accessing both buttons using someting like:
let clicks = document.querySelectorAll('.click');
for (let click of clicks) {
click.addEventListener("click",()=>{
list.classList.toggle('newlist');
});
}

You need a forEach to address every button-list pair.
I believe the below code solves your JavaScript issues. Adjust the CSS as needed (I have changed the original HTML a little).
let drops = document.querySelectorAll('.drop');
drops.forEach(function(drop) {
let click = drop.querySelector('.click');
let list = drop.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.drop {
width: 150px;
float: right;
padding: 0 5px;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 100%;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
margin-top: 1px;
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class="drop">
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
<div class="drop">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
</div>
</div>
</div>

Close sidebar menu when click outside of it and when click on menu item

The target is to close the sidebar menu when I click outside of it or when I click on one of the menu item. I've created the two working functions in Javascript to open and close the menu, clicking on the toggle:
<script>
function openNav() {
document.getElementById("#sideMenu").style.width = "250px";
}
function closeNav() {
document.getElementById("#sideMenu").style.width = "0";
}
function clickOutsite() {
TO-DO
}
function clickOnItemAndClose() {
TO-DO
}
</script>
<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
I've tried to create an overlay layer and create a function connected to it, but the result is not valid.
Could you help me, please? Thanks in advance
Edit: here there is a demo
https://codepen.io/Clara83/pen/PoPVMgN

The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">
To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked
function hideSidebar() {
document.getElementById('openSideMenu').checked = false;
}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) {
if (!sidebarContainer.contains(event.target))
hideSidebar();
});
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sideMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: grey;
z-index: 1;
}
.sideMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid black;
}
.sideMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sideMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sideMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sideMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sideIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
<div class="header"></div>
<div id="sidebarContainer">
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active" onclick="hideSidebar()">Item1</li>
<li onclick="hideSidebar()">Item2</li>
<li onclick="hideSidebar()">Item3</li>
</ul>
</div>
</div>

hover is firing while clicking and leaving element

I have a strange problem.I dont find any solution.
I have a click and hover event on an element.When i click on the elements and leaves both click and hover are working but i dont want hover to work when i click and leave.
$('div#menu > div.menu').hover(function() {
$(this).addClass('menuHighlight');
$(this).find('.spanHighlight').addClass('shown');
}, function() {
$(this).removeClass('menuHighlight');
$(this).find('.spanHighlight').removeClass('shown');
console.log('unhover');
});
$('.menu').click(function() {
var _id = $(this).attr('id');
$('.menu').removeClass('menuHighlight');
$(this).addClass('menuHighlight');
$('.spanHighlight').removeClass('shown');
$(this).find('.spanHighlight').addClass('shown');
$('#content > div').removeClass('shown');
$('#' + _id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
.shown {
display: block!important;
}
.menuHighlight {
background: rgb(80, 91, 123);
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>
I want both the functions to work,But when am clicking on .menu and leaving the element unhover should not call.
Please guide me how to do that

I think you can solve it by using a clicked state, In the below solution an additional class clicked is used to indicate that that item was clicked, if so don't do anything in mouseleave
$('div#menu > div.menu').hover(function() {
$(this).addClass('menuHighlight');
$(this).find('.spanHighlight').addClass('shown');
}, function() {
if ($(this).hasClass('clicked')) {
return;
}
$(this).removeClass('menuHighlight');
$(this).find('.spanHighlight').removeClass('shown');
console.log('unhover');
});
$('.menu').click(function() {
$('.menu.menuHighlight').removeClass('menuHighlight');
$('.menu.clicked').removeClass('clicked');
$(this).addClass('menuHighlight').addClass('clicked');
$('.spanHighlight.shown').removeClass('shown');
$(this).find('.spanHighlight').addClass('shown');
$('#content > div').removeClass('shown');
$('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
.shown {
display: block!important;
}
.menuHighlight {
background: rgb(80, 91, 123);
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>
A much simpler implementation using css for hover will be
$('.menu').click(function() {
$('.menu.selected').removeClass('selected');
$(this).addClass('selected');
$('#content > div').removeClass('shown');
$('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
div#menu > div.menu:hover, div#menu > div.menu.selected {
background: rgb(80, 91, 123);
}
div#menu > div.menu:hover .spanHighlight, div#menu > div.menu.selected .spanHighlight {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu selected">Add Application<span class="spanHighlight"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>