I am attempting to design a working Hamburger icon using HTML and CSS, but it is not collapsing as intended

I am new to Bootstrap and experimenting with it. The responsive navbar in Bootstrap is not functioning as expected on my screen. Can someone help me identify the issue and fix it?

<!DOCTYPE html>

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bda7bca7ba">[email protected]</a>/dist/css/bootstrap.
min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <nav class="navbar navbar-light">
      <div class="container-fluid">
        <h2>Posts</h2>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse" id="navbarItems">
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Feed</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Week</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Month</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Year</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Infinity</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Latest</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394d574c574a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

I included the full code, hoping that clicking the hamburger icon would collapse the nav bar and then reopen it upon clicking again.

htmlcssbootstrap-5hamburger-menu

Answer №1

Your HTML code is missing some attributes and classes. Here's a revised version that should fix the issue:

Make sure to use the correct attributes for the button element.

// Before
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems">
  <span class="navbar-toggler-icon"></span>
</button>

// After
<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarItems"
  aria-controls="navbarTogglerDemo03"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon"></span>
</button>


// Before
<div class="navbar-collapse" id="navbarItems"></div>

// After
<div class="collapse navbar-collapse" id="navbarItems"></div>

Hopefully, this solution resolves your issue :)

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

Do individual JavaScript script tags operate independently of one another in terms of error handling?

My main goal is to establish a connection to my server using websockets and send messages to the browser for remote page reloads. I want to ensure that this code runs independently of any other errors on the page, allowing me to remotely refresh the page i ...

javascripthtmlruntime-error

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascriptjqueryhtmlsvgtooltip

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

Tips for triggering animation only when the element is in the viewport

I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...

javascriptcssreactjsanimationcss-animations

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

htmlcsssass

When a user toggles one div, the other toggled div should automatically close

Below is a snippet of code where I have implemented a functionality using vue.js to toggle different divs based on button clicks. The current setup allows for toggling individual divs when their corresponding buttons are clicked. However, I am looking to ...

htmlvue.js

Guide on how to showcase an array in a string format using table rows in JavaScript or jQuery

After making an AJAX call to a PHP database, I receive a String as a result in my script. The format of the string is shown below: array(4) { [0]=> array(3) { ["id"]=> string(3) "181" ["number"]=> ...

javascriptphphtmljqueryarrays

keeping variables hidden from the user until a certain action is taken

In my project, I am working with three main code classes: 1) node.js (utilizing express framework) 2) index.html (serving as the home page when users visit the site) 3) sck.js which performs a specific function (details to follow on the first and second fi ...

javascripthtmlnode.js

Transfer data from button to input field

Trying to create a simple calculator with PHP to submit to my teacher, I have the basic HTML and PHP codes in the same file. However, I am struggling to figure out how to pass the number from a button to the text input in order to create a larger number, ...

phphtml

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

I attempted to animate the rotation of a circle and display the content of a specific image by pausing it for a period of time. However, I am unsure how to halt the animation and display the content of the specified image. Here's what I tried: HTML C ...

htmlcsssassbootstrap-5

Is it possible to prevent website backgrounds from duplicating?

When I visit my website and zoom in using CTRL +, the background image starts duplicating instead of just resizing. Other solutions I've found only stretch the image, which is not what I want. My website has a comments section that can make the length ...

htmlcss

Is there a way to use CSS to prevent a user from being able to click on a table?

My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...

htmlcss

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Guide on extracting a JavaScript string from a URL using Django

How can I extract "things" from the JavaScript URL "/people/things/" without any unnecessary characters? I've attempted inefficient methods like iteration, but struggle with removing the undesired parts of the string, leading to slow performance. Th ...

javascripthtmldjangourl

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

csshtmloverflow

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

JavaScript Cookie to Ensure Form Submission is Limited to a Single Instance

Seeking assistance with automatically submitting a form on page load using JS cookies. Here is the code I have, but it's not functioning as expected. Any guidance would be greatly appreciated. Thank you. I'm unsure about the section in my code th ...

javascripthtmlcookies

What is the best way to smoothly scroll to another page using a specific id?

My website consists of multiple pages and I am looking for a code that will allow for smooth scrolling navigation to another page when loading on a specific id or section. For example, in the navbar I have multiple pages with links. When clicking on a lin ...

javascripthtmlcss

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo