Unable to collapse the Bootstrap dropdown menu

For the life of me, I can't seem to find a solution to my problem. I'm currently working on creating a responsive navbar for my website by following a tutorial. The goal is to make it mobile-friendly with a button that expands the menu on smaller devices. However, even after integrating jQuery, the menu still won't open.

Below is the code I've been working with. Hopefully, it's just a small oversight on my end.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">       </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Test</a>
        </div>

        <!-- Menu Items -->
        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>

                <!-- Drop Down Menu -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">About</a> </li>
                        <li><a href="#">Contact</a> </li>
                    </ul>
                </li>
            </ul>

            <!-- Right Align -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Logout</a> </li>
            </ul>
        </div>
    </div>
</nav>
</body>

</html>

I appreciate any assistance you can provide!

Answer №1

Simply update data-target="mainNavbar" to data-target="#mainNavbar"

Make a single line modification

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">

<meta charset="UTF-8">
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">       </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"  data-target="#mainNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Test</a>
        </div>

        <!-- Menu Items -->
        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>

                <!-- Drop Down Menu -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">About</a> </li>
                        <li><a href="#">Contact</a> </li>
                    </ul>
                </li>
            </ul>

            <!-- Right Align -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Logout</a> </li>
            </ul>
        </div>
    </div>
</nav>

Answer №2

Don't forget to include the # symbol in the data-target attribute of your button for it to work correctly.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

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

contrasting module export approaches

Let me clarify that my query does not revolve around the disparity between module.exports and exports. Instead, I am interested in understanding the contrast between exporting a function that generates an object containing the functions to be shared upon i ...

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

What is the method to determine the size of a Map object in Firestore database?

I currently have two elements within a document: an empty array, and a map object containing three components. If the array is empty, it transforms into type array. In this case, I can execute console.log(vehicles.Motorcycles.length) to receive a return of ...

What is the best way to combine elements from different arrays to create a comprehensive listing?

My current function successfully pulls data from another source to create a listing. However, the data I require is spread across multiple arrays, causing some items to be returned as "undefined." At the moment, I am only fetching data from the products a ...

Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu : No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [ ...

Struggling to change h2 style on WordPress?

In a WordPress page, I create three heading texts and adjust the CSS when the screen width is less than 820px. Here is the code snippet: <h1 class="block-h1">Heading 1</h1> <h2 class="block-h2">Heading 2</h2> <h3 class="block-h3 ...

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

Performing array reduction and summation on objects in JavaScript

Data Analysis: dataSet: [], models: [ { id: 1, name: "samsung", seller_id: 1, count: 56 }, { id: 1, name: "samsung", seller_id: 2, count: 68 }, { id: 2, name: "nokia", seller_id: 2, count: 45 }, { id: 2, name: "nokia", seller_id: 3, count: ...

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

HTML form submission with a grid of multiple choice options

I have created my own multiple choice grid: <div style="overflow-x:auto;"> <table class="w-100"> <tr> <td class="border"></td> <td class="border">Yes</td> <td class="border">No</ ...

I require assistance in integrating this code into a jQuery function within a .js file

In a previous discussion, Irina mentioned, "I have created a responsive fixed top menu that opens when the Menu icon is clicked. However, I would like it to hide after clicking on one of the menu items to prevent it from covering part of the sliding sectio ...

Executing a PHP function with an onclick event on an `<li>` tag via AJAX: What's the best approach?

Can you assist me in using AJAX to call a PHP function that communicates with an external server when the onclick event is triggered? <div class="container"> <h3 style=color:blue;>DETAILS </h3> <ul class="nav nav-pills" style="backgro ...

Transforming text into visual content using a live preview div powered by jQuery

Looking for a way to display images in real-time as a user types letters into a textarea field. When a user inputs a letter like 'k', an image associated with that letter should appear. Currently, only pre-entered letters on the page show images, ...

Developing Attributes in JSON

Greetings stackOverflow Community, I'm struggling a bit with creating JSON objects. I have code snippet that is meant to populate a list called members with names, and then add a property to each of those names. Here is the specific snippet in questi ...

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

How to defer the rendering of the router-outlet in Angular 2

I am currently working on an Angular 2 application that consists of various components relying on data fetched from the server using the http-service. This data includes user information and roles. Most of my route components encounter errors within their ...

Embed a script into an iframe from a separate domain

While experimenting, I attempted to inject a script inside an iframe element using the following method. However, since the child and parent elements do not belong to the same domain (and I am aware that XSS is prevented in modern browsers), I was wonder ...

Display the file name of the following/preceding images on the backward/forward button

Hello, I am fairly new to web development and could use some professional assistance. I have a slideshow set up, but I am struggling with adding the filename of the next or previous images to the back/forward icons of the slideshow. Is this achievable with ...

Is there a PHP function that functions similarly to JavaScript's "array.every()" method?

As I work on migrating JavaScript code to PHP, I am facing the challenge of finding a replacement for the array.every() function in PHP. I have come across the each() function in PHP, but it doesn't quite meet my requirements. ...

Errors always occur when making POST requests in SAPUI5, leading to a 500 Server Error specifically related to OData

Currently diving into the world of SAPUI5 and OData, I am in the process of creating a basic application that showcases employee data in a table. The objective is to add a new employee to the table whose information will be stored in the SAP backend. Whil ...