I'm puzzled as to why my regular navigation bar vanishes whenever I tap on the menu icon

I'm struggling to keep the navbar in place without it disappearing. Here is my current code:

var sideBar = document.getElementById('sidebar')
var menuIcon = document.getElementById('menu-icon')

function show() {
  menuIcon.style.display = "none"
  sideBar.style.display = "Block"
}

function hide() {
  menuIcon.style.display = "inline"
  sideBar.style.display = "none"
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

...

<!DOCTYPE html>
<html lang="en">

...

  </nav>
  <
javascripthtmlcss

Answer №1

The reason this is occurring is because you are the one causing it, so you must remove these lines from your JavaScript code

var menuIcon = document.getElementById('menu-icon');
menuIcon.style.display = "none";
menuIcon.style.display = "inline";


const sideBar = document.getElementById("sidebar");

function show() {
  sideBar.style.display = "block";
}

function hide() {
  sideBar.style.display = "none";
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}


/*
Normal navbar on top of page
*/

body {
  height: 100vh;
}

.normal {
  position: fixed;
  top: 0;
  width: 100%;
  background: black;
}

.normal .normal-menu .menu-icon i {
  font-size: 30px;
  cursor: pointer;
  transition: all 0.4s ease;
  margin: 20px;
  color: white;
}

.normal .normal-menu .menu-icon i:hover {
  color: gray;
}

.normal .normal-menu .title {
  position: absolute;
  margin-top: 20px;
  left: 50%;
  transform: translate(-50%);
  color: white;
  font-size: 30px;
  text-decoration: none;
}


/*sidebar styles*/

.sidebar {
  position: fixed;
  display: none;
  background: black;
  height: 100vh;
  width: 300px;
  padding: 30px;
  top: 0;
  left: 0;
  color: white;
  transition: all 0.4s ease-in;
}

.sidebar .navbar .logo a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.sidebar .navbar .close-icon {
  float: right;
  font-size: 20px;
  transition: all 0.4s ease;
  cursor: pointer;
}

.sidebar .navbar .close-icon:hover {
  color: gray;
}

.sidebar .navbar .menu {
  margin-top: 100px;
}

.sidebar .navbar .menu li {
  list-style: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.sidebar .navbar .menu li:hover {
  color: black;
  background: white;
}

.sidebar .navbar .menu li a {
  color: inherit;
  text-decoration: none;
}
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f2839333f3e2310627e617e62">[email protected]</a>/css/boxicons.min.css" rel="stylesheet" />
<nav class="normal" id="normal">
  <ul class="normal-menu" id="normal-menu">
    <span class="menu-icon" id="menu-icon" onclick="show()"><i class="bx bx-menu"></i></span>
    <a href="index.html" class="title" id="title">Aaqil Abdullah</a>
  </ul>
</nav>
<aside class="sidebar" id="sidebar">
  <nav class="navbar">
    <span class="logo"><a href="index.html">Aaqil Abdullah</a></span>
    <span class="close-icon" onclick="hide()"><i class="bx bx-x"></i></span>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Interests</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</aside>

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

Update the JSON output format for auto-suggestion feature

I am looking to modify my JSON output, currently structured as: [ { masterCardNo: 90363.01 }, { masterCardNo: 90363.02 }, { masterCardNo: 90363004 }, { masterCardNo: 90363004 }, { masterCardNo: 90363004 }, { masterCardN ...

javascriptjqueryjson

Transfer information from an array to a Vue function

Having some difficulties passing data to the function myChart within the mounted section. As a beginner in vuejs, I'm struggling with identifying the issue. I am trying to pass data in labels and datasets, which are called from my function. Can anyone ...

javascriptphpvue.jschart.js

Tips for verifying conditional input fields in a React component?

As a beginner in React, I attempted to create a SignIn form component that dynamically changes its layout based on a boolean prop toggled between Login and Signup options. In the signup version, there is an additional text field labeled Confirm password, w ...

javascriptreactjsreact-hooksmaterial-ui

Can you explain the meaning of this AJAX code snippet?

I've been researching online for information, but I'm struggling to find any details about the AJAX code snippet that I'm using: function getEmployeeFilterOptions(){ var opts = []; $checkboxes.each(function(){ if(this.checke ...

javascriptjqueryajax

Disabling mandatory field validation for hidden fields in MVC 5

My MVC5 ViewModel has two important properties: public class RegisterViewModel { [Required] [EmailAddress] [Display(Name = "Email")] public string Email { get; set; } [Display(Name = "Date of Birth")] public Dat ...

javascriptjqueryasp.net-mvcvalidation

Executing logical operations within a Higher Order Component based on a given prop collection

My application involves a higher order component that performs some logic and passes the result down as a prop to a functional component for displaying data. In my main component, I pass the 'percentage' prop down to my HOC: <Match input ...

javascriptreactjs

Polymorph 1.0 - Using CSS Class Binding for Dynamic Properties

I attempted to link a CSS Class to a paper-progress element using the value of my property to change the item's color. I referenced Polymer's example on GitHub and studied the documentation on Data-binding. Here is my code: http://jsbin.com/bide ...

javascriptcsspolymer

Encountering a node-gyp error during the deployment of a Rails 6 application with a Vue app on Heroku

I'm running into an issue when trying to deploy my Rails 6 app with Vue on Heroku. The error I'm getting is as follows: [4/4] Building fresh packages... error /tmp/build_c242c7d78580af478535f5a344ff701e/node_modules/fibers: Command failed. ...

javascriptruby-on-railsvue.jsherokuyarnpkg

JavaScript tutorial: Creating a function to open multiple nested DIVs

I need help with a website design project where I have content organized in pairs of divs within a grid layout. There are clickable thumbnails that should load different pairs of divs when clicked, but my JavaScript code is only able to turn on one div at ...

javascripthtml

Is there a way to automatically close one menu when another is opened by clicking?

When all other search results have failed to solve my issue, I resort to posting my own question. My problem involves opening hidden submenus in a website's main menu. However, when I open multiple submenus, they just stack above each other. Ideally, ...

javascriptmenudropdown

Converting city/country combinations to timezones using Node.js: A comprehensive guide

When provided with the name of a city and country, what is the most reliable method for determining its timezone? ...

javascriptnode.jsnpm

Node.js is throwing the error "error TS18003: Config file does not contain any inputs."

I'm encountering an error and need help fixing it. Currently, I am using Windows 11. Every time I attempt to run npm run build in the command prompt, I encounter this specific error: Error File package.json package.json File tsconfig.json "com ...

javascriptnode.jstypescripttsc

Displacement occurs when the input tag is eliminated

After some trial and error, I have discovered that removing the input tag from the label causes a change in the layout height. I am puzzled as to why this is happening. Could there be a special reason for this height alignment issue when an input tag is pl ...

html

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...

htmlcss

Incorporating a dropdown change event in HTML

Is there a way to implement a Dropdown onchange function in HTML to pass value without using a submit button? I have tried it with the submit button and it works fine, but I'd prefer to use the dropdown onchange event. Can someone please assist me on ...

javascripthtml

Display of menu content may be unavailable at certain screen resolutions

Upon creating a new project in Visual Studio 2017, I developed a default master and sub pages website. In the master page, I incorporated a menu using a mix of divs and tables. Everything functions properly except for when the window size is reduced to a ...

htmlcssasp.net

How can I compare the current page URL with the navigation bar?

Looking to compare the URL of a current page to an element in the navigation bar using jQuery. Started by assigning the current URL to a variable: var currentPage = window.location.href; Then utilized an .each function to loop through each item in the n ...

javascriptjquerycss

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

After writing the css provided below, I noticed that it works fine on my laptop screen. However, when viewing it on a larger monitor, there is empty space at the end of the table. .wrapper{ width:auto; height: 500px; overflow-x: scroll; ...

htmlcssangulardatatablesangular-datatables

Tips for preventing the browser from freezing when incorporating a large HTML chunk retrieved through AJAX requests

I've developed a web application that showcases information about various items. Initially, only a small portion of the items are displayed at the top level. Upon loading the page for the first time and displaying these initial items, I make an AJAX r ...

javascriptjqueryajaxperformancedom

Comparing Jquery ajax object in Internet Explorer is not possible

Currently, I am utilizing jQuery's ajax function to fetch an HTML page. Upon success, a data object is retrieved. I aim to compare this data object to a string to determine the necessary actions. This functionality performs as expected in Firefox and ...

javascriptjqueryajax