Why is my nav menu not disappearing off the screen even though width is set to 0?-CodePudding

This code worked perfectly when the nav items were just links inside a div, but when I wrapped them with a UL and LI tags, the menu will not disappear to the right of the screen anymore...

Furthermore, is it possible to wrap this UL inside a div and add other elements to the disappearing menu above and below the UL?

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

#main-menu-container{
  right:0;
}

.sidenav {
  height: 100%;
  margin:0;
  width: 500px;
  position: fixed;
  z-index: 1;
  top: 0px;
  right: 0;
  background: radial-gradient(#2b5d87, #264c6d);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 160px;
  text-align:center;
  list-style: none;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  color:white;
  font-weight:bold;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
  color:#ffdc00;
}

#main {
  transition: margin-right .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>


<body>
<span style="font-size:30px;cursor:pointer; position:absolute; top:0; right:20px; color:#ffdc00;" onclick="openNav()">&#9776;</span>
<div id="main-menu-container">
    <p>testing where this will go</p>
    <ul id="mySidenav" >
        <li><a href="javascript:void(0)"  onclick="closeNav()">&times;</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
      </div>
</div>


<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  
</div>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "500px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
   
</body>
</html>

CodePudding user response：

Set padding-left to 0 as well .

body {
  font-family: "Lato", sans-serif;
}

#main-menu-container{
  right:0;
}

.sidenav {
  height: 100%;
  margin:0;
  width: 500px;
  position: fixed;
  z-index: 1;
  top: 0px;
  right: 0;
  background: radial-gradient(#2b5d87, #264c6d);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 160px;
  text-align:center;
  list-style: none;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  color:white;
  font-weight:bold;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
  color:#ffdc00;
}

#main {
  transition: margin-right .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>


<body>
<span style="font-size:30px;cursor:pointer; position:absolute; top:0; right:20px; color:#ffdc00;" onclick="openNav()">&#9776;</span>
<div id="main-menu-container">
    <p>testing where this will go</p>
    <ul id="mySidenav" >
        <li><a href="javascript:void(0)"  onclick="closeNav()">&times;</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
      </div>
</div>


<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  
</div>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "500px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
   document.getElementById("mySidenav").style.paddingLeft = "0";
}
</script>
   
</body>
</html>