The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary.

Check out my code on JSFiddle!

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
    z-index: 3;

}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>

<div id="myNav" class="overlay">
  <div class="overlay-content">
    <h4>
    <a href="https://www.invictusbaby.co.uk/">Home</a><br>
    <a href="https://www.invictusbaby.co.uk/invictus-v-plus">V-Plus</a><br>
    <a href="https://www.invictusbaby.co.uk/carbon-edition">Carbon Edition</a><br>
    <a href="https://www.invictusbaby.co.uk/special-edition">Special Edition</a><br></h4>
  </div>
</div>
<div class="container" onclick="toggleIcon(this);runNav()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<script>

function toggleIcon(x) {
    x.classList.toggle("change");
}
function runNav() {
    if (document.getElementById("myNav").style.height == "0%") {
        document.getElementById("myNav").style.height = "100%";
    } else {
        document.getElementById("myNav").style.height = "0%";
    }
}
</script>

Even after adjusting the overlay to 100% manually for previewing purposes, I found that the hamburger icon would become unresponsive. It seemed as though the interaction was impaired.

In an attempt to rectify the issue, setting ("myNav").style.height = "5%"}; caused the overlay to obstruct the icon, preventing any interaction in that region.

javascripthtmlcss

Answer №1

It appears that the javascript code responsible for enabling the overlay was not functioning correctly. To address this issue, I made adjustments to include a margin-top property within the overlay in order to ensure proper icon accessibility.

function myFunction(x) {
    x.classList.toggle("change");
}
function runNav() {
    if (document.getElementById("myNav").style.height == 0 || document.getElementById("myNav").style.height == "0%") {
        document.getElementById("myNav").style.height = "100%";
        }
        else {
        document.getElementById("myNav").style.height = "0%";
        }
}
.overlay {
    height: 0%;
    margin-top: 50px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
    z-index: 3;

}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="myNav" class="overlay">
      <div class="overlay-content">
        <h4>
        <a href="https://www.invictusbaby.co.uk/">Home</a>          <br>
        <a href="https://www.invictusbaby.co.uk/invictus-v-plus">V-Plus</a><br>
        <a href="https://www.invictusbaby.co.uk/carbon-edition">Carbon Edition</a><br>
        <a href="https://www.invictusbaby.co.uk/special-edition">Special Edition</a><br></h4>
      </div>
    </div>
    <div class="container" onclick="myFunction(this);runNav()">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </body>
</html>

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

extract data obtained from an AJAX call

I am working on an ajax request in my code: var rootURL = "http://localhost/myapp/api/api.php"; $.ajax({ type: 'GET', url: rootURL + '/favourites', dataType: "json", success: function(list) { }, error: f ...

javascriptphpjqueryajaxjson

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Assign and retrieve unique identifiers for checkboxes

One of the challenges I'm facing is working with an array of ID's from a database in combination with a table layout: The ID array includes specific record identifiers, for example: Array ( [0] => Array ( [id] => 1 [code] => GHY87 [de ...

phphtmlwebforms

Sending messages on Discord.js at one-minute intervals

Hey there, I'm currently facing an issue while trying to automate a message sending process on Discord. The specific error that keeps popping up is: bot.sendMessage is not a function I'm puzzled as to why this error occurs, so I've include ...

javascriptnode.jsdiscord

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: However, it's currently showing up like this: I've been attempting to use inline block so that I can have the negotiate button and pro ...

angularhtmltwitter-bootstrapcss

Directive for integrating Amcharts with Angular JS

I have created a custom directive specifically for displaying a single chart using Amcharts. angular.module("App").directive('myElem', function () { return { restrict: 'E', replace:true, temp ...

javascriptangularjsamcharts

The returned type of intersected functions in Typescript does not match the inferred type

While attempting to extract the return type of an intersected request, I encountered a discrepancy between the return type and the inferred type. Check out the shortened URL for more details: https://tsplay.dev/mAxZZN export {} type Foo = (() => Promis ...

javascripttypescriptfunctionreturn-typetype-mismatch

Saving asp.net strings in different formats to datetime fields in a database

Can someone please assist me with saving the string value of textbox to the database as a datetime, and for updating/editing purposes, display it again in the textbox as a string? The reason for this is that the datetime input will be copied from Outlook a ...

javascriptc#jqueryasp.net

Choose a specific parameter from a line using the body parser in Node.js

Upon receiving a post message, I am having trouble selecting a value from CSV data. Here is a sample of what I receive: { reader_name: '"xx-xx-xx-xx-xx-xx"', mac_address: '"name"', line_ending: '\n', field_delim: & ...

javascriptnode.jsexpress

Does the layout.tsx file in Next JS only affect the home page, or does it impact all other pages as well?

UPDATE After some troubleshooting, I've come to realize that the issue with my solution in Next JS 13 lies in the structure of the app. Instead of using _app.tsx or _document.tsx, the recommended approach is to utilize the default layout.tsx. Althou ...

javascriptreactjsnext.jsroutes

JavaScript array reformatting executed

I have an array object structured like this. [ {student_code: "BBB-002-XRqt", questions: "Length (in inches)", answer: "8953746", time: "00:00:08:15"}, {student_code: "CCC-003-TYr9", questions: "He ...

javascriptarraysreactjssortingobject

Issue with transmitting Razor form data to API controller using fetch or AJAX

I have created a basic razor web project and defined it as follows: in program.cs I added builder.Services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); In the controller, this is what I did: [Route("/api/[controller]")] [ApiCon ...

javascriptajaxrazorfetchrazor-pages

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

jqueryhtmlcsscss-selectors

Encountering the error "ReferenceError: __extends is not defined" is a common issue when modifying the rollup.config.js commonjs function in projects that use the ReactJS library

Currently, I am involved in a project and there is also a library project containing all the common components used throughout. Within this library, I had to integrate a component that relies on materialUI. However, upon trying to export this component, I ...

javascriptreactjsmaterial-ui

Having difficulty retrieving the specific Laravel validation error message through AJAX

In my Laravel project, the error message I am encountering is: {message: "The given data was invalid.", errors: {oData: ["validation.required"]}} errors: {oData: ["validation.required"]} message: "The given data was invalid." I am not trying to display ...

javascriptphpajaxlaravel

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

javascriptreactjstypescripttypes

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

javascriptreactjstypescriptloopsnext.js

Express.js - What is the method to determine the total number of routes set up in my application?

Is there a way to calculate the total number of routes set up in Express.js without manually counting them? I have defined routes throughout my application and they are not grouped together, so I can't use a counter inside each one. I've searche ...

javascriptexpress

I am facing difficulty in getting React to recognize the third-party scripts I have added to the project

I am currently working my way through the React Tutorial and have encountered a stumbling block. Below is the HTML markup I am using: <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=devi ...

javascriptjquerynode.jsreactjs

Unable to transfer the properties of reactjs to react-chartist

How can I pass the state from the parent component "main.js" into the child component "bar.js"? //main.js import React, { Component } from 'react'; import BarChart from './Bar-chart'; class Hero extends Component { cons ...

javascriptreactjschartist.js