What steps can I take to make this JavaScript burger menu function properly?

I've been following an online tutorial to spice up my navigation bars a bit, but I'm having trouble getting my burger menu and animations to work.

I've included the JS file above </body> (I also tried moving it into the <head>).

Could it be related to how it's saved, or did I make a really obvious mistake?

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  
  //Toggle Nav //
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
}

navSlide();
.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.nav-links li {
  list-style: none;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}
 
@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #006a71;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%) !important;

}
<ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

javascripthtmlcssnav

Answer №1

There has been a recent adjustment made to the burger menu line on a white background that is currently not visible.

The solution involves changing the color to black:

.burger div {
    background-color: black;
}

In addition, we need to adjust the opacity of:

.nav-links.nav-active li{
  opacity: 1;
}

Furthermore, the color needs to be changed as nothing is currently showing in desktop view:

.nav-links a {
  color: #111;
}


const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  
  //Toggle Nav //
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
}

navSlide();
.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.nav-links a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
  font-size: 14px;
}

.nav-links li {
  list-style: none;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
}
.nav-links.nav-active li{
  opacity: 1;
}

@media only screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #006a71;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%) !important;
}

.nav-links a {
   text-decoration: none;
   color: black;
   font-weight: bold;
   font-size: 14px;
}
<ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with custom anchor component in React that needs to perform an action before being clicked

React Component (Custom Anchor) import React from 'react'; class Anchor extends React.Component { onClick = (event) => { // ----------------------------- // send Google Analytics request ...

javascriptreactjstypescriptecmascript-6

Having trouble sending data from a page to a child component using getStaticProps

I'm currently working on a project using next.js and I'm facing an issue with passing data from the "gymlist" page to the "table" component. Here is the code snippet from the "gymlist" page where I have defined the getStaticProps function: expor ...

javascriptreactjsnext.js

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Just a few days back, I posted a question similar to this one and received an incredibly helpful response. However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform t ...

javascripthtmlcss

Ways to avoid Next.js from creating a singleton class/object multiple times

I developed a unique analytics tool that looks like this: class Analytics { data: Record<string, IData>; constructor() { this.data = {}; } setPaths(identifier: string) { if (!this.data[identifier]) this.da ...

javascriptreactjstypescriptnext.js

transmitting information using dataURL

Hey there! So I've got this code that does a neat little trick - it sends a dataURL to PHP and saves it on the server. In my JS: function addFormText(){ $('body').append('<input type="hidden" name="img_val" id="img_val" value="" /& ...

javascriptphp

Shuffle order of AngularJS ng-repeat array

I am struggling to create a basic grammar quiz where I need to randomly sort an array using ng-repeat. The goal is to display both correct and incorrect sentences in random order. Below you can find my code snippet: (function(angular) { 'use str ...

javascripthtmlangularjs

Exploring the Differences Between NPM Jquery on the Client Side and Server

I'm still getting the hang of node and npm, so this question is more theoretical in nature. Recently, I decided to incorporate jQuery into my website by running npm install jquery, which placed a node_modules directory in my webpage's root along ...

javascriptjquerynpm

Tips for organizing an object according to specific attributes

Within my table, I have implemented a feature that allows the display of only selected columns at a time. To achieve this, I store the chosen columns (table headings) in an array called selectedTableHeaders. The next step is to filter out a new array bas ...

javascriptvue.jsecmascript-6html-table

Automatically show a specific accordion section when the page loads

I have different accordion elements like this: <div class="accordion"> <h3 style="width: 430px">Location</h3> </div> <div class="accordion"> <h3 style="width: 430px">Category</h3> </div> Upon ini ...

javascriptjqueryaccordion

Ways to access the value of an attribute in an AngularJS object

Is there a way to access the value of field.jobtype within a controller? var app=angular.module('myapp',['ui.bootstrap','ui.select']); app.controller('mycontroller',function($scope){ $scope.onStateSelected = func ...

angularjshtmljquery-select2ui-select

Explore vue3 components using vue-test-library and universal components

I started creating unit tests for a production app using jest, @testing-library/vue, and supporting libraries. The first test I created is as follows: import vue from "vue"; import { render } from "@testing-library/vue"; import LibBtn f ...

javascriptvue.jsjestjsdtsvue-testing-library

Perform an AJAX request within a condition prior to executing the subsequent AJAX request

Within my database, I have two tables. When the submit button is pressed, I aim to insert a new trader into the trader table and retrieve the ID using laravel 5.2 by utilizing post ajax under certain conditions. Then, execute another post ajax for invoic ...

javascriptphpjqueryajax

Guide to positioning the highlighted image in a lightbox gallery: Aligning the active image in the

Hey there, I have implemented the Lightbox gallery feature in my Django application. The gallery functions such that when a user clicks on an image, it opens up the gallery with the selected image displayed prominently, along with the functional icons for ...

javascriptjquerydjangotemplateslightbox

Updating an AngularJS nested template dynamically during execution

Currently, I am facing an issue where I have a template nested within another template, and I want to load it dynamically when a specific button is clicked. Here is what I have attempted so far: This is the main body.html (which loads when a URL is provid ...

javascriptangularjsangular-ui-router

Attach an event listener to the HTML content

Being new to Javascript, I am attempting to add an event listener for each button on every card. However, the code seems to only apply the event 'click' to the last card (button). Is there a way to make this work with the innerHTML of the card? l ...

javascripthtmldomaddeventlistener

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

javascripthtmlreactjstypescriptwebpack

How to extract column name from query result set using JavaScript in Snowflake database?

When querying in Snowflake with JavaScript inside a stored procedure, we typically receive a Result_set. How can the column names of the output result be retrieved using the JavaScript API? Please note that this inquiry is not about retrieving the values ...

javascriptsnowflake-cloud-data-platformresultset

Editing text on an Android device - Removing formatting pieces

I've encountered an issue where trying to remove spans from an EditText using EditText.getText().clearSpans() results in strange behavior. Line feeds start appearing as boxes and any newly set spans are misplaced. My question is: Is there a way to cl ...

androidandroid-edittextgettexthtmlredraw

The Javascript code is failing to run following an ajax request

When I use XMLHttpRequest.send to call a php script that contains some javascript code, the javasript in the called php script does not run. The process of making the call: var formdata = new FormData(); formdata.append("uploadfilename", file); var ajax ...

javascriptphpajax

Converting JavaScript code to React requires excluding jQuery

I have been working on updating my old JavaScript code to make it compatible with React. The main goal is to integrate external data into a 3rd party form. Here is the original JS code: <script charset="utf-8" type="text/javascript" ...

javascriptjqueryreactjsurl-rewriting