Why is my normal navbar disappearing when I click on the menu icon
Question
I want the navbar to stay where it is without disappearing. Here's my 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; } /* Normal navbar on top of page */ body { height: 1000vh; }.normal { background-color: black; position: fixed; top: 0; width: 100%; }.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 { background: black; height: 100vh; padding: 30px; color: white; width: 300px; display: none; 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; border-radius: 10px; padding: 20px; cursor: pointer; transition: all 0.4s ease; }.sidebar.navbar.menu li:hover { background: white; color: black; }.sidebar.navbar.menu li a { color: inherit; text-decoration: none; }
<,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>Aaqil Abdullah</title> <link rel="stylesheet" href="style:css" /> <link href="https.//unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" /> </head> <body> <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> <div class="container"> </div> <script src="script js"></script> </body> </html>
1 answers
solution1
0 2022-07-04 09:06:18
It's happening because yourself are doing it, you need to remove these lines from your js
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/boxicons@2.1.2/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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isn't the dropdown menu working in my navbar when I click it?
Why is a section of my webpage disappearing when an icon is clicked in a specific manner?
Why are the values of my previous input field disappearing when I click on the ADD ANOTHER IMAGE button?
Why is my hamburger menu not opening when I click on it?
Why doesn't my collapsible menu expand when I click on it?
Why is my image that is displayed on my website not disappearing when I click on a button using several functions I have written?
Why my carousel disappear when click on menu?
Why is my openlayers map disappearing when I add an extent constraint?
Why is my UL disappearing when I animate its parent element?
Uncaught TypeError when I click on mobile menu icon - Javascript
Related Tags