Site navigation menu not showing up correctly-CodePudding

I have created a navigation menu that has proper functionality (being that it allows the user to navigate from certain parts of the website), however whenever I try to find it it does not show up where it is supposed to be, yet I can click on the area and it pulls up the side menu. Does anyone have a fix?

CSS Stylesheet:

`#mainstyle {
 background-color: white;
 color: black;
 text-align: center;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, 
 sans-serif;
}

body {
 margin: 0;
}

.header {
 padding: 90px;
 margin: 0px;
background-color: black;
text-align:center;
color: white;
font-size: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
}

/*code for main page is above, hamburger menu is below*/

#menu_toggle {
    opacity: 0;
}

#menu_toggle:checked   .menu_btn > span {
    transform: rotate(45deg);
}

#menu_toggle:checked   .menu_btn > span::before {
    top: 0;
    transform: rotate(0deg);
}
#menu_toggle:checked   .menu_btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
#menu_toggle:checked ~ .menu_box {
    left: 0 !important;
}
.menu_btn{
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
}
.menu_btn > span,
.menu_btn >span::before
.menu_btn >span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
}
.menu_btn > span::before {
    content: '';
    top:-8px;
}
.menu_btn > span::after {
    content: '';
    top:-8px;
}
.menu_box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #eceff1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 4);
    transition-duration: .25s;
}
.menu_item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
}
.menu_item:hover {
    background-color: #cfd8dc;
}
`

HTML Webpage:

   <!DOCTYPE html>
<html>

<title>About Me</title>

<link rel="stylesheet" type="text/css" href="mystylesheet.css">  

    <head>
        <div >
          <h1>About Me!</h1>
          <p> Who I am, what I like to do, etc.</p>
        
        </div>
      
          </head>
    <body id="mainstyle">
    <p> Sample text to be replaced.</p>
    </body>

    
    <div >
      <input id="menu_toggle" type="checkbox">
      <label  for="menu_toggle">
          <span></span>
      </label>
  
      <ul >
        <li> <a  href="index.html">Home</a></li>
        <li> <a  href="outreach.html">View My Socials</a></li>
       <li> <a  href="achievement-breakdown.html">View My Achievements</a></li>
       <li> <a  href="about-me.html"> About Me</a></li>
      </ul>
  </div>
</html>

CodePudding user response：

Pretty sure that:

you should never put DOM content inside <head></head> tag (I suggest you to check this answer);
You closed the <body> tag too soon;
The issue actually is that the label contains just an empty span, so the browser doens't render it (I suggest you to try using the Inspector tool - you can open it with F12).

I've cleaned a bit your code, here's something that works:

#mainstyle {
 background-color: white;
 color: black;
 text-align: center;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, 
 sans-serif;
}

body {
 margin: 0;
}

.header {
 padding: 90px;
 margin: 0px;
background-color: black;
text-align:center;
color: white;
font-size: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
}

/*code for main page is above, hamburger menu is below*/

#menu_toggle {
  opacity: 0;
}

#menu_toggle:checked   .menu_btn > span {
  transform: rotate(45deg);
}

#menu_toggle:checked   .menu_btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu_toggle:checked   .menu_btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu_toggle:checked ~ .menu_box {
  left: 0 !important;
}
.menu_btn{
  position: fixed;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
.menu_btn > span,
.menu_btn >span::before
.menu_btn >span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu_btn > span::before {
  content: '';
  top:-8px;
}
.menu_btn > span::after {
  content: '';
  top:-8px;
}
.menu_box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #eceff1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 4);
  transition-duration: .25s;
}
.menu_item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu_item:hover {
  background-color: #cfd8dc;
}

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
    <link rel="stylesheet" type="text/css" href="mystylesheet.css">
  </head>

  <body id="mainstyle">
    <style>
      #mainstyle {
       background-color: white;
       color: black;
       text-align: center;
       font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, 
       sans-serif;
      }

      body {
       margin: 0;
      }

      .header {
       padding: 90px;
       margin: 0px;
      background-color: black;
      text-align:center;
      color: white;
      font-size: 30px;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
      }

      /*code for main page is above, hamburger menu is below*/

      #menu_toggle {
        opacity: 0;
      }

      #menu_toggle:checked   .menu_btn > span {
        transform: rotate(45deg);
      }

      #menu_toggle:checked   .menu_btn > span::before {
        top: 0;
        transform: rotate(0deg);
      }
      #menu_toggle:checked   .menu_btn > span::after {
        top: 0;
        transform: rotate(90deg);
      }
      #menu_toggle:checked ~ .menu_box {
        left: 0 !important;
      }
      .menu_btn{
        position: fixed;
        top: 20px;
        left: 20px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 1;
      }
      .menu_btn > span,
      .menu_btn >span::before
      .menu_btn >span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #616161;
        transition-duration: .25s;
      }
      .menu_btn > span::before {
        content: '';
        top:-8px;
      }
      .menu_btn > span::after {
        content: '';
        top:-8px;
      }
      .menu_box {
        display: block;
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100%;
        margin: 0;
        padding: 80px 0;
        list-style: none;
        background-color: #eceff1;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 4);
        transition-duration: .25s;
      }
      .menu_item {
        display: block;
        padding: 12px 24px;
        color: #333;
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
      }
      .menu_item:hover {
        background-color: #cfd8dc;
      }
    </style>

    <div >
      <h1>About Me!</h1>
      <p> Who I am, what I like to do, etc.</p>
    </div>

    <p> Sample text to be replaced.</p>

    <div >
      <input id="menu_toggle" type="checkbox">
      <label  for="menu_toggle">
        <img width="200%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Hamburger_icon_white.svg/800px-Hamburger_icon_white.svg.png?20190820131613"/>
      </label>

      <ul >
        <li> <a  href="index.html">Home</a></li>
        <li> <a  href="outreach.html">View My Socials</a></li>
        <li> <a  href="achievement-breakdown.html">View My Achievements</a></li>
        <li> <a  href="about-me.html"> About Me</a></li>
      </ul>
    </div>
    </body>
</html>

To enhance it or as an exercise, you could for example try making the icon change to a dark one when the menu is open.

When writing StackOverflow questions involving JavaScript, remember you can open the editor and attach a running piece of code :)

CodePudding user response：

You can't see the label simply because it has no content and has no background color. For the side menu, the left position was set to -100%. Here all I have done is set the background color to white and changed the left position to 0:

#mainstyle {
 background-color: white;
 color: black;
 text-align: center;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, 
 sans-serif;
}

body {
 margin: 0;
}

.header {
 padding: 90px;
 margin: 0px;
background-color: black;
text-align:center;
color: white;
font-size: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
}

/*code for main page is above, hamburger menu is below*/

#menu_toggle {
    opacity: 0;
}

#menu_toggle:checked   .menu_btn > span {
    transform: rotate(45deg);
}

#menu_toggle:checked   .menu_btn > span::before {
    top: 0;
    transform: rotate(0deg);
}
#menu_toggle:checked   .menu_btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
#menu_toggle:checked ~ .menu_box {
    left: 0 !important;
}
.menu_btn{
    position: fixed;
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 1;
    background-color: #ffffff;
}
.menu_btn > span,
.menu_btn >span::before
.menu_btn >span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
}
.menu_btn > span::before {
    content: '';
    top:-8px;
}
.menu_btn > span::after {
    content: '';
    top:-8px;
}
.menu_box {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #eceff1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 4);
    transition-duration: .25s;
}
.menu_item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
}
.menu_item:hover {
    background-color: #cfd8dc;
}

<!DOCTYPE html>
<html>

<title>About Me</title>

<link rel="stylesheet" type="text/css" href="mystylesheet.css">  

    <head>
        <div >
          <h1>About Me!</h1>
          <p> Who I am, what I like to do, etc.</p>
        
        </div>
      
          </head>
    <body id="mainstyle">
    <p> Sample text to be replaced.</p>
    </body>

    
    <div >
      <input id="menu_toggle" type="checkbox">
      <label  for="menu_toggle">
          <span></span>
      </label>
  
      <ul >
        <li> <a  href="index.html">Home</a></li>
        <li> <a  href="outreach.html">View My Socials</a></li>
       <li> <a  href="achievement-breakdown.html">View My Achievements</a></li>
       <li> <a  href="about-me.html"> About Me</a></li>
      </ul>
  </div>
</html>