Hamburger Menu Not Working – Updated Bootstrap

My hamburger menu stopped working, (after upgrading from Bootstrap 4 to Bootstrap 5). So I had to find out why and get it fixed?

My setup – When I updated Bootstrap, I placed the updated css files in my website rather than using a CDN, (as I had reduced the size of the css files using a compiler). For the JavaScript files, I used the Bootstrap CDN link.

Topics:

• Fixing the Bootstrap Hamburger Menu:
  • The ‘data-toggle’ attribute:
  • The ‘data-target‘ attribute:
• The Hamburger Menu is Now Working:

Fixing the Bootstrap Hamburger Menu

To start with, I found some hints on how to fix using Google Search…

This is what I did to get it working, (after upgrading from Bootstrap 4 to Bootstrap 5.x.x).

I found the best route was to:

• If you can… Go back to your original Bootstrap 4 setup, so you can see where any issues may have started.
• I updated the Bootstrap css from v4 to v5.x.x – My hamburger menu still worked.
• I updated the JavaScript cdn from v4 to v5.x.x – The hamburger menu stopped working! Does this indicate a potential cause for the hamburger menu failure?

From the Google search above, there were suggestions that the ‘data-toggle’ attribute gets updated in Bootstrap 5 to ‘data-bs-toggle’. So I did a search of my website using my code editor, to see where all the data-toggle attributes were?

The ‘data-toggle’ attribute:

1. Search for all the ‘data-toggle‘ attributes using a code editor, (I’m using Visual Studio Code)…
2. This displayed a the list of all the files containing the attribute ‘data-toggle‘.

Note:

• The number of files containing ‘data-toggle‘ will vary depending on the files used in your website?

3. Prepare to do a search and replace, replacing all the ‘data-toggle‘ attributes with the ‘data-bs–toggle‘ attribute…

Note:

• If you’re using the JavaScript cdn, then you may not need to update, or have any of the JavaScript files showing in your code editor.
• However, if you stop using the cdn for JavaScript, and you have JavaScript files…
• It may therefore be a good idea, to also update any javaScript files you may have.

4. Non-JavaScript PHP files.
5. JavaScript files.

The ‘data-target‘ attribute:

I found another attribute needs to be updated…

6. Search for all the ‘data-target‘ attributes using a code editor,
7. This displayed a the list of all the files containing the attribute ‘data-target‘.

Note:

• The number of files containing ‘data-target‘ will vary depending on the files used in your website?

8. Prepare to do a search and replace, replacing all the ‘data-target‘ attributes with the ‘data-bs–target‘ attribute…

Note:

• If you’re using the JavaScript cdn, then you may not need to update, or have any of the JavaScript files showing in your code editor.
• However, if you stop using the cdn for JavaScript, and you have JavaScript files…
• It may therefore be a good idea, to also update any javaScript files you may have.

9. JavaScript files.
10. Non-JavaScript PHP files.

The Hamburger Menu is Now Working…

Hope this helps…