Issue with accessing hamburger menu on Bootstrap site

I recently added a navigation bar to my website using the BootStrap documentation. However, when I switch to the mobile version and click on the hamburger menu, nothing happens. Below is the code snippet for reference:

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">
        <a class="navbar-brand" href="#">Salman's Website</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="nav navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="electric.html">Electric<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="gasoline.html">Gasoline<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="hybrid.html">Hybrid<span class="sr-only">(current)</span></a>
              </li>
            </ul>
          </div>
      </nav>

To ensure responsiveness, I have included 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head section as well.

Your help would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It appears that you have not included the necessary javascript files for bootstrap. To ensure proper functionality, make sure to import them:

<!-- INCLUDE BOOTSTRAP STYLES -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<!-- INCLUDE BOOTSTRAP SCRIPTS-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11617e616174633f7b6251203f20273f21">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">
        <a class="navbar-brand" href="#">Salman's Website</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="nav navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="electric.html">Electric<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="gasoline.html">Gasoline<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="hybrid.html">Hybrid<span class="sr-only">(current)</span></a>
              </li>
            </ul>
          </div>
      </nav>

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

Filter kendo grid by selecting multiple options from a drop-down menu in the mult

I am working with a kendo grid and an HTML drop down. When I set the drop down to single select, I can successfully filter the kendo grid based on the selected item's string value. Below is the filtering code that works for single select: $("#Locati ...

javascriptjqueryhtmldrop-down-menukendo-ui

Is there a more efficient method for transforming an HTML form into an object through serialization?

I'm in the process of creating a form that includes both radio and checkbox inputs. Since multiple elements share the same name, I have developed the following solution. Is there a more efficient and simpler way, using only pure JavaScript, to conver ...

javascripthtml

Tips for displaying a blank data table when a page loads, including the use of a text input

I am looking to implement a feature where upon loading a page, an empty datatable is displayed with <input type="text" /> in each column. Users can input data into the table and then submit it. After submission, I would like to send all the data to t ...

javajqueryhtmldatatables

Determine if there is at least one element that is true in the array

I am currently working on developing a menu that can detect the active page based on the site's structure, which is purely PHP/HTML without any CMS. While I have successfully implemented navigation for primary links, I am facing issues with the dropd ...

phpcssarraysif-statementdrop-down-menu

How can I update the source of an HTML video element seamlessly without causing any glitches?

I'm attempting to create a video call interface that plays videos generated based on user responses. I want the ability to seamlessly switch between the currently displayed video and the next generated video without the HTML collapsing and rebuilding ...

javascripthtmljquerycssvideo

How to customize the checkbox color in Material UI?

I've been attempting to adjust the color of checkboxes and radio buttons. After conducting some research, I stumbled upon this helpful link: Material UI change Input's active color Unfortunately, I keep encountering the following error: (0 , _ ...

javascripthtmlcssreactjsmaterial-ui

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...

htmljquery

Style Guide for optimum class arrangement in Bootstrap framework

I've come across various Style Guides that discuss declaration and attribute ordering, but surprisingly none that specifically address class ordering. For instance, one developer's code looks like this: <div class="btn btn-primary btn-lg mt- ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to have the Facebook widget load from a locally saved HTML file?

I am currently working on coding a local file on my tablet and I need the Facebook widget to display correctly. However, it appears that the widget is not showing up when viewed from a local file. Is there any way to make it work in this situation? Here i ...

htmlfacebook

Local Website Error: Something went wrong with the website

I've encountered a problem while trying to run my website on the local host. An error message pops up saying: Access forbidden! The requested object is not accessible, either because it's read-protected or unreadable by the server. If you susp ...

phphtmlweb

What impact does including a parent View Tag have on the styling in React Native?

Why does adding a View parent break my styles? Could React Native's View tag have default styles that I'm not aware of? Displayed below is the Button component along with screenshots demonstrating the difference when using and not using the View ...

ioscssreactjsreact-nativeview

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

javascripthtmlcsstabulator

What methods do HTML document Rich Text Editors use to incorporate rich text formatting features?

I am curious about the way text in the textarea is styled in rich-text editors. I have attempted to style text in the form but it doesn't seem to change. How does JS recognize the characters typed by the user? Can you explain this process? Edit: Aft ...

javascripthtmlcssdomrichtext

Add-on Group for Form Inputs - Is a style element missing? (Bootstrap 4)

I am looking for a way to incorporate a Bootstrap4 input group label between two input fields. While there are "prepend" and "append" styles available, in this scenario, I require a "center" style which seems to be missing. Does anyone have a solution for ...

htmlcssformsbootstrap-4

Implementing pagination for a scrolling tab group with a flexible number of buttons

I need to implement a pagination feature in my scroll function where users can select from a list of tabs/buttons and it will automatically scroll to the corresponding div/tab. Currently, I have a while statement that generates songs from my database, with ...

phpjquerycss

Using jQuery to specifically extract the second value from a comma-separated list stored in a hidden input

I'm working with these input fields: <input class="things" type="hidden" value="FirstItem,SecondItem"/> <input class="things" type="hidden" value="FirstItem,SecondItem"/> Is there a way to extract only the second values from these input ...

javascriptjqueryhtml

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

Challenge encountered with AJAX request

Whenever I trigger an AJAX request to a JSP using a dropdown menu, it works perfectly fine. However, when I try to trigger the same request using a submit button, the content vanishes and the page refreshes. function najax() { $.ajax({ url:"te ...

javascriptjqueryhtmlajax

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file? I have used NPM to install the Materialize CSS framework by running: npm install --save-dev materialize-css Now, I need to include the CS ...

javascripthtmlcssnpmgulp

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...

javascriptjqueryhtmlcss