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>

Is there any way I can hide my modal when the page is opened

So I was creating a website and I decided to make a modal type form using only Html, CSS, and js... I followed the tutorial and completed it..but now I am stuck...Every time the page opens or reloads, the modal pops up... I only want it to pop up when I click the login button ... Is there any way I can do this...any help would be appreciated...Here's the code
Html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<!-- {% load static %} -->
<link rel="shortcut icon" href="https://lh3.googleusercontent.com/a-/AOh14Gib1NYf2ZSICywbbqOUXh6laaEP1NJYCj18Mz-jBg=s96-c-rg-br100" type="image/jpg" />
<link rel="stylesheet" href="../static/Css/home.css" />
<script src="https://kit.fontawesome.com/fb5fc8c33b.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script defer src="../static/Js/home.js"></script>
</head>
<body>
<nav>
<ul>
<li class="logo">
<img src="../static/Images/Precious-san.jpg" />
</li>
<li class="responsive-bar"><span class="fas fa-bars"></span></li>
<div class="nav-lists">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="search-box">
<input type="search" placeholder="Search" autocomplete="off" />
<label class="search-icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class='losn'>
<button id='login-btn' onclick='showLoginForm' ><a>Login</a></button>
<p>or</p>
<button id='signup-btn' >Sign up</button>
</div>
<div class='login-bg' >
<div class='login-content' >
<div class='close' onclick='hideLoginForm()' >+</div>
<h3>Login</h3>
<input type='email' placeholder='Email' id='email'><br>
<input type='password' placeholder='Password' id='password'><br>
<label for='show-password' >
<input type='checkbox' id='show-password' onclick='showPassword()' > Show Password
</label><br>
<input type='submit' value='Login' id='submit'>
</div>
</div>
</body>
</html>
Css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* Global Variables */
:root {
--imperialred: #E63946;
--honeydew: #F1FAEE;
--powderblue: #A8DADC;
--celadonblue: #457B9D;
--prussianblue: #1D3557;
}
/* Css starts here */
* {
margin: 0;
border: 0;
/* box-sizing: border-box; */
font-family: 'Montserrat', sans-serif;
}
nav ul li img {
width: 60px;
height: 60px;
border-radius: 50%;
}
nav ul li.logo {
flex: 1;
}
nav {
background-color: var(--prussianblue);
color: var(--honeydew);
padding: 10px 40px 10px 70px;
border-left: none;
border-right: none;
}
nav ul {
display: flex;
list-style: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
nav ul div.nav-lists {
display: inline-flex;
padding: 0 25px;
}
nav ul div li a {
color: var(--honeydew);
text-decoration: none;
font-size: 18px;
padding: 0 15px;
}
nav ul div li a:hover {
color: var(--imperialred);
}
nav ul .search-box {
height: 40px;
width: 240px;
display: flex;
background-color: var(--imperialred);
border-radius: 5px;
}
nav ul .search-box input {
height: 100%;
width: 200px;
border: none;
outline: none;
border-radius: 5px 0 0 5px;
padding: 0 10px;
font-size: 16px;
}
nav ul .search-box .search-icon {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
border-radius: 0 5px 5px 0;
}
nav ul .search-box .search-icon:hover {
color: #000
}
nav ul .search-box .search-icon span {
font-size: 18px;
}
nav ul .responsive-bar {
font-size: 29px;
display: none;
flex: 1;
padding: 0 40px;
}
nav ul .responsive-bar span {
height: 42px;
width: 42px;
text-align: center;
line-height: 42px;
border-radius: 5px;
cursor: pointer;
}
nav ul .responsive-bar span.show:before {
content: '\f00d';
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
padding: 0 40px;
z-index: -2;
}
.content .text {
font-size: 40px;
font-weight: 800;
padding: 5px 0;
color: #202020;
}
.content .p {
font-size: 28px;
font-weight: 600;
color: #202020;
}
div.losn {
position: sticky;
top: 5px;
display: grid;
text-align: center;
justify-content: flex-end;
font-size:14px;
margin: 5px;
}
div.losn button {
background: transparent;
border: none;
outline: none;
cursor: pointer;
color: var(--honeydew);
background-color: var(--prussianblue);
}
div.losn button:hover {
color: var(--imperialred);
}
body {
background-color: var(--powderblue)
}
div.login-bg {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
div.login-content {
width: 500px;
height: 300px;
background-color: var(--celadonblue);
border-radius: 5px;
display: grid;
align-items: center;
justify-content: center;
position: relative;
}
div.login-content h3 {
font-size: 30px;
text-align: center;
margin-top: 10px;
color: var(--honeydew)
}
div.login-content input {
outline: none;
border: 1px solid var(--prussianblue);
border-radius: 5px;
}
div.login-content #email, #password {
height: 30px;
width: 250px;
padding-left: 10px;
}
div.login-content #email {
margin-top: 30px;
}
div.login-content #submit {
height: 30px;
width: 100%;
background: var(--honeydew);
cursor: pointer;
margin-bottom: 20px;
}
div.login-content #submit:hover {
background-color: #EFEFEF;
}
div.login-content label {
cursor: pointer;
color: var(--honeydew)
}
div.close {
position: absolute;
top: 0;
right: 13px;
font-size: 40px;
color: var(--honeydew);
cursor: pointer;
transform: rotate(45deg);
}
div.close:hover {
color: var(--imperialred);
}
/* Responsive */
#media screen and (max-width: 896px) {
nav {
padding: 10px 40px 10px 0px;
}
}
#media screen and (max-width: 826px) {
nav ul li.responsive-bar {
display: block;
padding-left: 10px;
}
nav {
z-index: 1;
padding: 10px 40px 10px 0px;
}
nav .logo {
display: none;
}
nav ul div.nav-lists {
z-index: -1;
position: fixed;
top: -220px;
width: 100%;
background-color: var(--celadonblue);
right: 0;
display: inline-block;
transition: top .4s;
}
nav ul div.nav-lists.show {
top: 60px;
}
nav ul div.nav-lists li {
text-align: center;
line-height: 30px;
margin: 30px 0;
}
nav ul div.nav-lists li a {
font-size: 19px;
}
nav ul {
padding: 0;
}
}
#media screen and (max-width: 445px) {
nav ul {
flex-wrap: nowrap;
padding: none;
}
nav ul li.search {
width: 50vmin;
}
nav ul li input {
width: 40vmin;
}
nav ul li .search-box {
width: 10vmin;
}
nav ul li.responsive-bar {
padding-left: 10px;
}
}
Javascript:
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});

Step: 1 First of all, you have to hide the pop up modal
div.login-content {
display: none;
}
Step 2: Remove the CSS as below
div.login-bg {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
Stpe 3: Using javascript we will add the class as follows
document.querySelector('.close').addEventListener("click", function hideLoginForm() {document.querySelector('.login-bg').classList.remove("login_transparent"); });
document.getElementById('login-btn').addEventListener("click", function showLoginForm() { document.querySelector('.login-bg').classList.add("login_transparent"); });
Step 4: Add the Styles based on the class you have added in the javascript
.login_transparent {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
.login_transparent .login-content {
display: grid;
}
Here is my working fiddle
https://jsfiddle.net/Rajkumar007/ovjruq32/

You need to hide the modal when js is loaded
So add document.querySelector('.login-bg').style.display = "none"; at the beginning of your code.
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
document.querySelector('.login-bg').style.display = "none"; //hide login-bg
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});
and here is a demo : https://jsfiddle.net/mbp49wa7/

The code for my navbar does not work properly

I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Scroll Nav in Wordpress not working

I want to create a 'scroll-nav' for my website. So I separated 2 Navs and added some jquery:
<nav class="main-nav clearfix">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
<nav id="scroll-nav" style="display:none">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
But it´s not working. Do I have to do something different because of WordPress? It tested it in a normal html, it works fine there.

You are putting clearfix like ID when you have to do it in class attribute.
<nav id="scroll-nav" class="clearfix" style="display:none">
And put your
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
into
$(document).ready(function(){
});

#import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500);
nav {
background: #333;
overflow: auto;
padding: 60px;
position: relative;
z-index: 2;
}
ul {
text-align: center;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
display: block;
padding: 5px 10px;
margin: 0 10px;
color: #eee;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 32px;
font-weight: bold;
transition: all 200ms linear;
}
nav a:hover,
nav#small a:hover {
color: #C18055;
background: #fff;
}
nav#small {
background: #fff;
padding: 20px 40px;
position: fixed;
box-sizing: border-box;
width: 100%;
top: 0;
z-index: 1;
box-shadow: 0px 2px 2px #fff;
}
nav#small h1,
nav#small a {
color: #333;
}
nav#small h1 {
font-size: 38px;
}
nav#small h1>a {
color: #C18055;
}
nav#small h1>a:hover {
color: #3ab4a6;
}
div#content {
height: 2200px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0;
opacity: 0.9;
}
div#content h2 {
color: #fff;
font-weight: bold;
transform: rotate(-10deg);
line-height: 60px;
font-size: 48px;
text-transform: uppercase;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 10%;
bottom: 10%;
text-shadow: 2px 2px 2px #333;
font-family: 'Pacifico', cursive;
}
div#content h2:before {
display: inline-block;
background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0;
background-size: cover;
width: 239px;
height: 200px;
content: "";
transform: rotate(-80deg);
margin-bottom: 40px;
}
#media (max-width: 700px) {
nav {
padding: 20px;
}
nav h1 {
display: block;
float: none;
text-align: center;
padding: 20px;
}
nav ul {
float: none;
padding: 20px;
}
div#content h2 {
width: 30%;
}
nav#small {
padding: 20px;
}
nav#small ul {
padding: 5px;
}
nav#small h1 {
padding: 10px;
font-size: 28px;
margin-bottom: 5px;
}
nav#small a {
font-weight: normal;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<nav id="small">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="content">
<h2>Scroll!</h2>
</div>
Would you please check my above snippet?

Smart Phone Fixed Nav Bar Not Closing after selection

I have got some great info from this forum and this is my first question so be nice..
I have a top nav bar which is fixed.
The fixed part seems to be working fine but i now have two issues.
In responsive mode when you click the hamburger icon it opens beautifully and you can jump to any anchor on the page ( i am designing a 1 page site). But the nav wont close upon click or tap so i am left with a gaping open nav.
Second problem is when the nav is fixed and i scroll down and go over a form the form fields are displayed on top of the nav bar, in both 960 width & responsive.
I have attached what i think is the code here and any advice would be greatly appreciated.
Cheers
Max
This is the html:
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul>
<span style="color:white">Menu</span>
This is the css:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
This is the java script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>

For first question add this js:
$('nav li>a').on('click', function (e) {
if($(window).width()<600){
menu.slideUp();
}
});
the full code is below:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$('nav li>a').on('click', function(e) {
if ($(window).width() < 600) {
menu.slideUp();
}
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul> <span style="color:white">Menu</span>
</nav>
ul>li>a can be changed with a ID or class as you prefer.
For 2nd question add this css:
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
DEMO