I don't know why my hamburger menu won't slide out

This is all the HTML

<!-- nav bar -->
<!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">
  <link rel="stylesheet" href="styles.css">
  <script src="https://kit.fontawesome.com/2fe31d4da7.js" crossorigin="anonymous"></script>
  <title>HTML Documentation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

  <!-- nav bar -->
  <nav id="nav-bar">
    <header><span class="html-color">HTML</span> Documentation</header>
    <div class="menu">
      <li><a href="#intro" class="nav-link">Introduction</a></li>
      <li><a href="#html_elements" class="nav-link">HTML Elements</a></li>
      <li><a href="#html_headings" class="nav-link">HTML Headings</a></li>
      <li><a href="#html_paragraphs" class="nav-link">HTML Paragraphs</a></li>
      <li><a href="#html_comments" class="nav-link">HTML Comments</a></li>
    </div>
    <input type="checkbox" id="check">
    <label for="check" class="open-menu"><i class="fa-solid fa-bars"></i></label>
  </nav>

  <!-- main -->
  <main id="main-doc">


    <!-- introduction -->
    <section class="main-section" id="intro">
      <header>Introduction</header>
      <p>HTML stands for HyperText Markup Language. It is the most basic building blocks of a webpage. It gives a webpage structure and meaning, while other languages like CSS and JavaScript can be used to make the website pretty and make it function properly.</p>
      <p>Think of it related to your body, HTML is the skeleton, CSS is the body features that defines a person such as hair type, skin color, eye color etc. Lastly, JavaScript is what makes the body move and live, such as the heart, brain, lungs etc.  </p>
    </section>


    <!-- HTML Elements -->
    <section class="main-section" id="html_elements">
      <header>HTML Elements</header>
      <p>The start tag, some content, and the end tag make up an HTML element.</p>
      <code>
        <p>
          &lt;h1&gt;Hello!&lt;/h1&gt;
        </p>
      </code>
      <div class="code-div">
        <code>
          <p>
            &lt;p&gt;Welcome to the Technical Documentation page!&lt;/p&gt;
          </p>
        </code>
    </div>
      <p>The h1 and p in the greater than and less than signs is a starting tag and the tag at the end defined by a backward slash is the ending tag.</p>
      <p>Here is a list of some tags:</p>
      <ul>
        <li>&lt;head&gt;&lt;/head&gt;</li>
        <li>&lt;body&gt;&lt;/body&gt;</li>
        <li>&lt;footer&gt;&lt;/footer&gt;</li>
        <li>&lt;div&gt;&lt;/div&gt;</li>
        <li>&lt;span&gt;&lt;/span&gt;</li>
      </ul>
    </section>


<!-- HTML Headings -->
    <section class="main-section" id="html_headings">
      <header>Headings</header>
      <p>There are six heading tags h1, h2, h3, h4, h5, and h6. They are used to separate headings and subheadings on a webpage.</p>
      <p>The h1 tag is the largest while the h6 tag is the smallest.</p>
      <code>
        <p>
          &lt;h1&gt;This is an h1 tag&lt;/h1&gt;
        </p>
      </code>
    </section>


    <!-- HTML Paragraphs -->
    <section class="main-section" id="html_paragraphs">
      <header>Paragraphs</header>
      <p>the p element is used to define a paragraph in a webpage. It looks like this:</p>
      <code>
        <p>
          &lt;p&gt;This is a paragraph.&lt;/p&gt;
        </p>
      </code>
      <p>When your writing text in a p element, an important note is that it ignores 2 or more spaces between words.</p>
    </section>


    <!-- HTML Comments -->
    <section class="main-section" id="html_comments">
      <header>Comments</header>
      <p>A comment in HTML looks like this:</p>
      <code>
        <p>
          &lt;!-- this is a comment --&gt; 
        </p>
      </code>
      <p>The browser will ignore everything that is in the comment. This is useful for explaining what a certain part of code does, and is very useful when collaborating with others on a project.</p>
    </section>
  </main>
</body>
</html>

This is all the CSS

* {
  padding: 0;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
  font-size: x-large;
  font-weight: bold;
}

p {
  font-size: 1.3em;
}

#nav-bar {
  display: inline-block;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.525);
  position: fixed;
  height: 100%;
  color: white;
  /* border: 5px solid gold; */
}

#nav-bar header {
  padding: 30px;
  text-transform: uppercase;
}

.html-color {
  color: orangered;
  border-radius: 3px;
  padding: 7px;
  background-color: rgba(0, 0, 0, 0.573);
}

#nav-bar a {
  display: block;
  padding: 15px 15px 15px 30px;
  text-decoration: none;
  font-size: x-large;
  color: rgb(255, 255, 255);
  transition: all 0.3s;
  /* border: 5px solid gold; */
}

#nav-bar a:hover {
  background-color: rgba(0, 0, 0, 0.575);
  color: orangered;
}

#main-doc {
  margin-left: 375px;
  padding-right: 50px;
  max-width: 1000px;
}

#main-doc .main-section {
  padding-top: 50px;
}

#main-doc header {
  margin-top: 30px;
}

#main-doc p {
  padding-bottom: 15px;
  padding-top: 15px;
  margin-bottom: 20px;
  margin-top: 20px;
}

#main-doc code p {
  background-color: rgba(0, 0, 0, 0.046);
  padding: 20px;
  margin-top: 50px;
  margin-left: 50px;
  border-radius: 3px;
}

.code-div {
  margin-top: 60px;
}

#main-doc ul {
  margin-left: 50px;
  font-size: large;
}

#nav-bar li {
  list-style-type: none;
}

.fa-bars {
  font-size: 2em;
  color: orangered;
  position: absolute;
  top: 33px;
  right: 30px;
  display: none;
}

#check {
  display: block;
}

.open-menu {
  display: none;
}

/* media queries */

@media (max-width: 900px) {
  #nav-bar {
    width: 100%;
    height: 100px;
    background-color: black;
  }

  #nav-bar .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(27, 27, 27);
    height: 87vh;
    width: 100%;
    position: fixed;
    right: -100%;
  }

  #nav-bar .html-color {
    color: none;
    border-radius: none;
    padding: none;
    background-color: none;
  }

  #main-doc {
    margin-left: 0;
    padding-left: 15px;
    padding-top: 75px;
  }

  #nav-bar a:hover {
    background-color: transparent;
  }

  .open-menu {
    display: contents;
  }

  #check {
    display: block;
  }

  .open-menu:hover {
    cursor: pointer;
  }

  #check:checked ~ .menu {
    right: 0;
  }
}

we need a bit more context:

please let us know what course/certification project your working on,
(eg learn html by building a cat photo app )
what step you are on or what your trying to achieve
and what you have already tried

this will give people a better chance to help, and cause less frustration to yourself

Sorry, I should of been more specific.

This is the code that is responsible for making the menu screen (class=“menu”) that slides out from the right of the screen when the hamburger menu is clicked:

The HTML for the navigation menu

<!-- nav bar -->
  <nav id="nav-bar">
    <header><span class="html-color">HTML</span> Documentation</header>
    <div class="menu">
      <li><a href="#intro" class="nav-link">Introduction</a></li>
      <li><a href="#html_elements" class="nav-link">HTML Elements</a></li>
      <li><a href="#html_headings" class="nav-link">HTML Headings</a></li>
      <li><a href="#html_paragraphs" class="nav-link">HTML Paragraphs</a></li>
      <li><a href="#html_comments" class="nav-link">HTML Comments</a></li>
    </div>
    <input type="checkbox" id="check">
    <label for="check" class="open-menu"><i class="fa-solid fa-bars"></i></label>
  </nav>

This is the CSS media query to make it so that when the screen width is 900px the nav bar will be fixed on top of the page instead of on the side.

@media (max-width: 900px) {
  #nav-bar {
    width: 100%;
    height: 100px;
    background-color: black;
  }

  #nav-bar .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(27, 27, 27);
    height: 87vh;
    width: 100%;
    position: fixed;
    right: -100%;
  }

  #nav-bar .html-color {
    color: none;
    border-radius: none;
    padding: none;
    background-color: none;
  }

  #main-doc {
    margin-left: 0;
    padding-left: 15px;
    padding-top: 75px;
  }

  #nav-bar a:hover {
    background-color: transparent;
  }

  .open-menu {
    display: contents;
  }

  #check {
    display: block;
  }

  .open-menu:hover {
    cursor: pointer;
  }

I was also looking into this kind of thing when I first started.
however its almost impossible to do so with just html css

In the end I gave up XD

there are a few youtube vids that can show you the minimum amount of javascript, and some have great explanations to how it works how it can be improved or edited etc.

stackoverflow is also a great place to research these types of problems.

1 Like

Ok, thanks I will try using some Javascript

Thank you, I will try and use Javascript :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.