I made my menu to shrink into hamburguer style on
max-width: 500px;
I added javascript to close it after clicking a link and it works fine, but after the first link has been click, to open it again, tha hamburguer icon doesn't work but you have to click where the menu links are supposed to be (even without displaying).
var nav = 1;
function navMenu() {
if (nav === 1) {
document.getElementById("showmenu").style.opacity = 0;
nav = 0;
} else if (nav === 0) {
document.getElementById("showmenu").style.opacity = 1;
nav = 1;
}
}
.nav {
justify-content: flex-end;
text-align: right;
height: 50px;
line-height: 50px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: calc(12px + .2vw);
width: 100%;
box-sizing: border-box;
}
.menu {
display: block;
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: #828282;
margin: 0 20px;
line-height: 50px;
}
label {
margin: 0 0 0 0;
font-size: 25px;
line-height: 50px;
display: none;
margin: 0 20px;
text-align: right;
}
#toggle {
display: none;
}
#media screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.nav {
margin-right: 0;
}
.menu {
text-align: center;
width: 100%;
display: none;
box-sizing: border-box;
background-color: #000000;
}
.menu a {
display: block;
border-bottom: 1px solid #D736A6;
margin: 0;
}
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu" id="showmenu" onclick="navMenu()">
Home
About
Skills
Work
Contact
</div>
</div>
<div class="menu" id="showmenu" onclick="clickAnyAreaOnMenu();">
Home
About
Skills
Work
Contact
</div>
<script>
function clickAnyAreaOnMenu() {
let toggle = document.getElementById("toggle");
toggle.checked = false;
}
</script>
Related
I am having trouble getting this to work.
The idea is that when the #menuBtn is clicked (checkbox is true) it should change the display of the #menuOverlay to block instead of none. I've checked it out while using a visible checkbox, and it works just as it should when clicking the label icons (turning true/false), but it won´t change the display from none to block on true no matter what I do. Is there anyone that have any advice to what I am doing wrong?
Html:
<div class="menu_overlay" id="menuOverlay">
<label for="menuBtn">
<i class="fas fa-times"></i>
</label>
<ul>
<li>Work</li>
<li>Illustrations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-outer">
<div class="container">
<div class="brandmark">Logo</div>
<input type="checkbox" name="" id="menuBtn">
<div class="landing_page">
<div class="menu">
<label for="menuBtn">
<i class="fas fa-bars"></i>
</label>
</div>
</div>
</div>
</div>
css (scss):
body {
font-family: 'Poppins', sans-serif;
background: white;
width: 100vw;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* MENU */
.container-outer {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 90%;
height: 6vh;
position: relative;
}
.menu_overlay {
z-index: 100;
height: 100vh;
width: 100vw;
position: absolute;
background: white;
ul {
list-style: none;
display: flex;
flex-direction: column;
text-align: right;
margin: 75px 0 0 0;
padding: 0 2% 0 0;
}
.fas {
text-align: right;
right: 25px;
top: 25px;
position: absolute;
}
}
.landing-page {
max-height: 100vh;
height: 100%;
width: 100%;
position: relative;
}
.menu-text { // This is for the fonts inside the menu pop up
-webkit-text-stroke: 2px black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: bold;
text-decoration: none;
}
.menu_overlay a:hover { // This is for the fonts inside the menu to fill black on hover
color: black;
}
.fas { // This is for the hamburger menu icon
font-size: 2rem;
color: black;
cursor: pointer;
}
.fas:hover { // This is for hover effect on the hambuger menu icon
transform: scale(1.1);
}
.active { // Active page filled with black in menu overlay
color: black;
}
#menuBtn {
display: none; //
}
#menuBtn:checked ~ .menu_overlay {
display: block;
}
#menuOverlay {
display: none;
}
.brandmark {
color: black;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
width: 100%;
display: flex;
align-items: center;
z-index: 101;
}
JS
var x = document.getElementById("menuBtn")
var menu = document.getElementsById("menuOverlay")
if (x = true) {
menu.style.display = "block";
console.log('this is if');
} else {
menu.style.display = "none";
console.log('this is else');
}
}
getElementById no getElementsById
var x = document.getElementById("menuBtn")
var menu = document.getElementById("menuOverlay")
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/
I have an issue where my Hamburger menu is open on page load. It functions as desired other than that. If i click on it it closes and then opens as well onclick.
<div class="topnav">
Dashboard
<!-- Navigation links (hidden by default) -->
<div id="nav">
<i class="fas fa-user-circle"></i>Profile
<i class="fas fa-user-circle"></i>Invoices
<i class="fas fa-user-circle"></i>Post Message
<i class="fas fa-user-circle"></i>New User
<i class="fas fa-sign-out-alt"></i>Logout
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void();" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("nav");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
CSS
* {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
background-color: #737373;
color: #ffffff;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #737373;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #737373;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #ef1d1d;
transition: background-color 0.2s;
}
.content {
width: 100%;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content > p, .content > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content > p table td, .content > div table td {
padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
font-weight: bold;
color: #4a536e;
padding-right: 15px;
}
.content > div p {
padding: 5px;
margin: 0 0 10px 0;
}
/* For Posting announcements */
.form-contact {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-contact .form-contact-heading,
.form-contact .checkbox {
margin-bottom: 10px;
}
.form-contact .checkbox {
font-weight: normal;
}
.form-contact .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-contact .form-control:focus {
z-index: 2;
}
.form-contact input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.container { background-color: #435165;}
#media print {
body {
display: none;
}
}
.col-md-12{
background-color: white;
}
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
background: #ef1d1d;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the active link (or home/logo) */
.active {
background-color: #737373;
color: white;
}
What could be causing this issue within the above script? I have looked all over it to see. The javascript appears correct but im clearly missing something.
You need to add this to your css:
#nav{
display:none;
}
It will hide your #nav div by default, i.e. on page load. Alternatively, you could use Javascript to hide #nav on page load by adding:
// self executing function
(function() {
var x = document.getElementById("nav");
x.style.display = "none";
})();
This will make your myFunction(); method ready to use on page load.
Since it is often appropriate with a menu like that, and because it is only 4 additional lines, you may want to consider using this third method, which will keep the toggle state of your menu if/when the page is reloaded:
// self executing function
(function() {
if(window.localStorage.getItem('nav') === null){
window.localStorage.setItem('nav', 'none');
}
var x = document.getElementById("nav");
x.style.display = window.localStorage.getItem('nav');
})();
function myFunction() {
var x = document.getElementById("nav");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
window.localStorage.setItem('nav', x.style.display);
}
You can use CSS like this:
#nav{
display:none;
}
But if you want to do something when the body loads you can add a function like this:
<body onload="onload()">
and the function:
function onload() {
var x = document.getElementById("nav");
x.style.display = "none";
}
Check it out here:
Fiddle
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>
In reference to this snippet here, I am trying to make my navigation show up at the top whenever the user scrolls up.
The nav can disappear as per normal when scrolling down, but it should show up when scrolling back up.
Below is the snippet:
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"</script>
<nav>
<div class="container">
Brand
<button>
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-menu">
<li>Home</li>
<li>page a</li>
<li>page b</li>
<li>page c</li>
<li>page d</li>
</ul>
</div>
</nav>
body {
background: #eee;
min-height: 3000px;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.add_menu{
background: red;
}
.container {
width: 80%;
margin: 0 auto;
clear: both;
}
a {
display: inline-block;
color: #333;
text-decoration: none;
}
nav {
background: #fff;
height: 80px;
line-height: 80px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
transition: all 0.5s;
}
nav.scrollUp {
transform: translateY(-80px);
}
nav ul.navbar-menu {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
nav ul.navbar-menu li {
display: inline-block;
margin: 0 10px;
}
nav ul.navbar-menu li a {
color: #666;
font-size: 14px;
}
nav a#brand {
text-transform: uppercase;
foat: left;
font-weight: 800;
font-size: 20px;
}
nav button {
background: none;
width: 30px;
height: 40px;
margin-top: 20px;
border: none;
float: right;
display: inline-block;
cursor: pointer;
display: none;
}
nav button span {
width: 30px;
height: 40px;
height: 2px;
background: #333;
display: block;
margin: 5px 0;
}
#media (max-width: 768px) {
nav ul.navbar-menu {
display: none;
}
nav button {
display: block;
}
}
$(document).ready(function () {
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
When I view the page via inspector, I get an uncaught reference error:
Uncaught ReferenceError: $ is not defined
However, I have jquery imported as my snippet shows.
How can I fix this?
I am edit you some portions of code it's fixed please check.
$(document).ready(function () {
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
body {
background: #eee;
min-height: 3000px;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.add_menu{
background: red;
}
.container {
width: 80%;
margin: 0 auto;
clear: both;
}
a {
display: inline-block;
color: #333;
text-decoration: none;
}
nav {
background: #fff;
height: 80px;
line-height: 80px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
transition: all 0.5s;
}
nav.scrollUp {
transform: translateY(-80px);
}
nav ul.navbar-menu {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
nav ul.navbar-menu li {
display: inline-block;
margin: 0 10px;
}
nav ul.navbar-menu li a {
color: #666;
font-size: 14px;
}
nav a#brand {
text-transform: uppercase;
foat: left;
font-weight: 800;
font-size: 20px;
}
nav button {
background: none;
width: 30px;
height: 40px;
margin-top: 20px;
border: none;
float: right;
display: inline-block;
cursor: pointer;
display: none;
}
nav button span {
width: 30px;
height: 40px;
height: 2px;
background: #333;
display: block;
margin: 5px 0;
}
#media (max-width: 768px) {
nav ul.navbar-menu {
display: none;
}
nav button {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="container">
Brand
<button>
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-menu">
<li>Home</li>
<li>page a</li>
<li>page b</li>
<li>page c</li>
<li>page d</li>
</ul>
</div>
</nav>