Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not. I am trying to debug but I have no idea what is going wrong. If anyone knows, please help
// Hamberger menu
const navSearch = document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
console.log(navSearch.style.display);
console.log('1');
if(navSearch.style.display = "none") {
console.log('2');
navSearch.style.display = "inline-block";
navLeft.style.display = "inline-block";
console.log(navSearch.style.display);
} else if(navSearch.style.display = "inline-block") {
console.log('3');
navSearch.style.display = "none";
navLeft.style.display = "none";
}
console.log('......');
});
// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;
//General Styles
* {
margin: 0;
padding: 0;
}
body {
background-color: $color-light;
font-family: "Nunito", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $color-light;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
input {
border: none;
padding: 0.7rem 1rem;
background: $color-lightx2;
&:focus {
outline: none;
}
}
// Utilities
.container {
max-width: $website-width;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
// navbar
header {
background: $color-dark;
height: 100px;
#navbar {
padding-top: 1.3rem;
color: $color-light;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 2px;
padding: 0.5rem 1rem;
}
ul {
display: flex;
justify-content: center;
li {
padding-left: 1.5rem;
}
}
input[type="submit"] {
margin-left: 0.4rem;
background-color: inherit;
border: $color-main 2px solid;
color: $color-main;
&:hover {
background-color: $color-main;
color: $color-light;
transition: all 0.2s ease-in-out;
}
}
input[type="text"] {
padding: 0.7rem 1rem;
}
}
.toggle {
position: absolute;
top: 2.2rem;
right: 6rem;
transform: scale(2);
display: none;
}
}
#import 'media';
#media (max-width: 850px) {
header {
height: auto;
#navbar {
flex-direction: column;
align-items: start;
input[type="text"] {
margin: 1rem 0 1.4rem 3rem;
}
ul {
padding-bottom: 1rem;
}
}
.toggle {
display: inline-block;
}
.nav-search,
.nav-left {
display: none;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/style.css">
<title>AllMart</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div class="nav-logo">
AllMart
</div>
<div class="nav-search">
<form>
<input type="text" placeholder="Search Product...">
<input type="submit" value="SEARCH">
</form>
</div>
<div class="nav-left">
<ul>
<li id="cart"><i class="fas fa-shopping-cart"></i> CART</li>
<li id="profile"><i class="fas fa-user"></i> SIGN IN</li>
</ul>
</div>
</nav>
<span class="toggle"><i class="fas fa-bars"></i></span>
</div>
</header>
<script src="js/index.js"></script>
</body>
</html>
and this is the output I get whenever I click on the icon
I have no idea what is going wrong if anyone knows, please help
You need to use === or == in if statements, not =, which is the assignment operator. === is preferred because it tests for strict equality (no type conversion).
if(navSearch.style.display === "none")
else if(navSearch.style.display === "inline-block") {
Related
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);
I have an app To Do List. Using button you add task and new task adds to the list of items with checkbox and delete button in front of each one. I want to save all value and marked info on page (store it) once page renewed using browser. When I`m using mounted and watch.There are 2 issues: 1)When I use CodePen or GitHub to view the site and app it shows nothing and in console.log:"Unhandled error during execution of mounted hook"; 2)In Visual Studio Code it shows everything on preview, but stores only value of input-not marked chekboxes. Please help to solve it. Below my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: [],
checked: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
body {
font-family: sans-serif;
font-size: 14px;
color: #030303;
background: #3d5f82;
}
h1 {
font-weight: 500;
text-transform: uppercase;
text-align: center;
font-style: solid;
}
.btn {
color: #31d78c;
place-content: center;
place-items: center;
width: fit-content;
border-radius: 99px;
border: 1px solid #31d78c;
text-decoration: none;
text-transform: uppercase;
margin-right: 10px;
margin-top: 10px;
padding: 10px;
font-weight: 700;
background: #fff;
}
.btn:hover {
cursor: pointer;
background-color:rgb(231, 239, 235);
}
.btn.danger {
color: #eb3c15;
place-content: center;
place-items: center;
width: fit-content;
border-radius: 99px;
border: 1px solid #eb3c15;
text-decoration: none;
text-transform: uppercase;
margin-right: 10px;
margin-top: 10px;
padding: 10px;
font-weight: 700;
background: #fff;
}
.btn.danger:hover {
cursor: pointer;
background-color:rgb(236, 219, 219);
}
.container {
margin: 0 auto;
max-width: 1000px;
}
.form-control {
position: relative;
margin-bottom: 10px;
}
.form-control input,
.form-control select {
margin: 0;
outline: none;
border: 2px solid #ccc;
display: block;
width: 95%;
color: #2c3e50;
padding: 0.5rem 1.5rem;
border-radius: 3px;
font-size: 1rem;
}
.card {
overflow: hidden;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 10px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
background: #fff;
}
.card.center {
display: flex;
flex-direction: column;
align-items: center;
}
.list {
margin: 0;
padding: 0;
list-style: none;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
transition: .22s all;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
[v-cloak] {
display:none;
}
</style>
<body>
<div class="container" id="app" v-cloak>
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes" v-bind:key="note">
<div>
<input type="checkbox" v-model="checked[note]"/>
<span :style="checked[note] ? 'text-decoration: line-through' : ''">
{{index+1}}) {{note}}
</span>
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Try adding JSON.parse in a try-catch block
mounted() {
try {
this.notes = JSON.parse(localStorage.getItem('note'))
} catch(e) {
this.notes = []
}
}
I have made a toggle button to show some navlinks on mobile screens.
However on the first page load it takes two clicks.
After that point it toggle perfectly fine.
How can I make it so it functions correctly first time?
Heres the script that contains the function.
script.js
function ToggleNavLinks() { /
var navLink = document.getElementsByClassName("nav-links")[0];
if (navLink.style.display === "none") {
navLink.style.display = "flex";
}
else {
navLink.style.display = "none";
}
}
Heres the layout file that contains the front-end element.
I have tested if it was the external script reference and it definitely works.
layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta charset="utf-8"/> <!-- Charset -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script type="text/javascript" src="/javascripts/script.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<img class="logo" alt="logo" src="images/logo-stock.png">
<a class="nav-toggle" onclick="ToggleNavLinks()" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Links used in the navbar -->
<div class="nav-links">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
</header>
<div>
{{{body}}}
</div>
</body>
</html>
Ill also include the stylesheet in case that has anything to do with it.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
:root {
font-size: 16px;
font-family: 'Roboto', sans-serif;
--text-primary: white;
--text-secondary: #4c6bc1;
--bg-primary: #101316;
--bg-secondary: #181a1d;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--bg-primary);
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #181a1d;
}
body::-webkit-scrollbar-thumb {
background: #4c6bc1;
}
.navbar {
justify-content: space-between;
position: relative;
background-color: var(--bg-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar img {
width: 250px;
height: 100px;
}
.logo{
max-width: 100%;
height: auto;
}
.navbar-links {
height: 100%;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
font-size: 1.5rem;
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.nav-links li a:hover {
color: #4c6bc1;
}
.nav-toggle {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.nav-toggle:hover {
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
width: 100%;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
element.style.display === 'none'
is true when the element has an inline style attribute, which includes display: none. Note that this is true regardless of the actual computed style property of the element. You can check it in this example:
console.log(document.querySelector('.test').style.display);
.test {
display: block !important;
}
code {
background-color: #eee;
}
<div style="display: none;" class="test">I haz <code>style.display === 'none'</code>. You are looking at me. Stop staring, it's not nice.</div>
To check the computed property of the display, use
window.getComputedStyle(element).display === 'none'
In conclusion, replace
if (navLink.style.display === "none") {
with
if (window.getComputedStyle(navLink).display === "none") {
It maybe not the problem of Your Javascript. First check your CSS file. Check if the order of your code i.e display tag is already none or flex. Then only it was not working at 1st instance.
It may be like that:
.navlink{
display: none;
}
Change it to :
.navlink{
display: flex;
}
this is my html, css and js code below for side bar menu in bootstrap. the problem is is the header toggle and any other icon is not showing on the menu so i can't expand the menu also all the icons i used from box icons are not showing (also i imported https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css) , is there a way to fix this?
thanks in advance
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
:root {
--header-height: 3rem;
--nav-width: 68px;
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100
}
*,
::before,
::after {
box-sizing: border-box
}
body {
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s
}
a {
text-decoration: none
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem
}
.show {
left: 0
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
#media screen and (min-width: 768px) {
body {
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem)
}
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.show {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="/assets/images/logo.png" rel="icon" type="icon"> -->
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/scripts.js"> </script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css'>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span>
<div class="nav_list"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </div>
</div> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span>
</nav>
</div>
<!--Container Main start-->
<div class="height-100 bg-light">
<h4>Main Components</h4>
</div>
<!--Container Main end-->
You can keep the following code in your head tag. Found this cdn link from there official web page.
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
This worked for me
Change your bootstrap cdn with this
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
And add some css code
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0px;
}
MUST work
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I don't understand why this code doesn't work.
It works on an online platform such as jsfiddle but it doesn't work when I try it on VS Code live server.
This code provide that responsive header. If the size of page less than 1210 pixels navbar not seems. navbar seems if you click the button. Sorry for my english.
https://jsfiddle.net/1n8zv5xL/1/
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
CSS
#import url("https://db.onlinewebfonts.com/c/b2932945dbc71a0a2a4c03dd305cfe3a?family=Bauhaus");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-color:white;
justify-content: space-between;
display: flex;
align-items: center;
padding: 25px 15%;
height: 100px;
}
li,a,button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header h1 {
font-family: "Bauhaus";
color:rgba(0, 136, 169, 1);
font-size: 45px;
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
html{
overflow-y: scroll;
}
.navbar-links {
list-style: none;
}
.navbar-links li {
display: inline-block;
padding: 0px 20px;
}
.navbar-links li a {
transition: all 0.3s ease 0s;
}
.navbar-links li a:hover {
color: rgba(0, 136, 169, 1);
}
.logo {
width: 500px;
display: flex;
flex-direction: initial;
align-items: center;
justify-content: space-around;
}
.toggle-button {
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
#media screen and (max-width:1210px) {
header {
flex-direction: column;
}
.navbar-links {
display: flex;
flex-direction: column;
}
.toggle-button {
display: flex;
}
.navbar-links.active {
display: none;
}
}
JAVASCRİPT
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
The problem is with the head.
You are including the scripts in head so it will be loaded prior to the document. So, inorder for you to access dom nodes you should listen for the ready event in jquery - or you can move the scripts to the end of the body
Eg:
$(function() {
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
})
OR
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</body>
<footer>
</footer>
</html>
That should do the trick.