Issues with Bootstrap 4.3 navbar dropdown feature and hamburger icon functionality

I tried copying the navbar code from the bootstrap website, but unfortunately the dropdown list and hamburger menu are not functioning as expected. I attempted to include popper.js and meta tags in the code based on some suggestions from Stack Overflow answers, but that approach did not resolve the issue.

It's an ejs file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  

        <title>Social media</title>  
        <script
                src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">
        </script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  
        <link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> 
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        <script src="/scripts/index.js"></script>
    </head>  
    <body>
                <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
                        <div class="container">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                        <ul class="navbar-nav mr-auto">
                                                <li class="nav-item active">
                                                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                                </li>
                                                <li class="nav-item">
                                                        <a class="nav-link" href="#">Link</a>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Dropdown
                                                        </a>
                                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                        <a class="dropdown-item" href="#">Action</a>
                                                        <a class="dropdown-item" href="#">Another action</a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Something else here</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item">
                                                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                                                </li>
                                        </ul>
                                        <form class="form-inline my-2 my-lg-0">
                                                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                                        </form>
                                </div>
                        </div>
                </nav>

Answer №1

After some troubleshooting, the issue was solved by including Bootstrap.js in the code. The necessary script was added:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Here is the functioning snippet:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="/scripts/index.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
   // Rest of the code remains unchanged

Answer №2

Make sure not to overlook including the bootstrap.min.js file in your code. Simply add the file and you're good to go.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer №3

Ensure you include bootstarp.min.js in order to utilize bootstrap functionality.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

What could be causing the vertical alignment issue of this logo in its parent container?

I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly. W ...

Should I install @capacitor/android as a dev dependency in the package.json file of a React project?

I was pondering whether it would be better to add @capacitor/android, @capacitor/ios, and @capacitor/core as development dependencies. ...

TypeScript - creating a dynamic instance of a new class with a custom

Looking to dynamically create new class objects in a loop with customizable names? For example, having classes like "tree": export default class ParentClass { // ... } export default class Thomas extends ParentClass { // ... } export default cla ...

Is it possible for me to include &x&y&z in my Sass code?

When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...

CSP Issue Detected in MERN Application (nodemailer)

Currently, I am working on a MERN App called Blogify. So far, I have implemented the sign-up and sign-in functionalities. Now, I am in the process of adding the "Forgot Password" feature using nodemailer. I have successfully tested email sending in both d ...

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

Enhance parent style when child's data-state or aria-checked attributes are updated in React using Styled Components

Within a label, there is a button embedded as shown below: <MyLabel htmlFor='xx' onClick={() => onChange}> <MyButton id='xx' {...rest} /> Check it! </MyLabel> In the Developer Tools Elements section, the st ...

Postman not getting any data in response after sending a POST request in NodeJS Express

Here is a snippet of my NodeJs code: app.post("/makeSentenceParamsPost", express.json(), (request, response) => { const object = request.body.object; const adjective = request.body.adjective; console.log('<br>POST requ ...

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

I'm encountering issues with the following code snippet let user = req.user.id; await MyTable.update( {'interested': Sequelize.fn('array_append', Sequelize.col('interested'), user)}, {'where ...

Having trouble getting the view to display

Currently, I am in the process of building an application using node.js, express, couchDB, and nano for communication with CouchDB. I have implemented a jQuery get request from client-side JavaScript. Despite observing the view in the RAW result through Fi ...

What steps should I take to resolve issues with the npm installation on Linux?

I'm encountering an issue while attempting to use npm install in order to install a package. Despite my attempts to update and re-download from the root directory, I am unable to resolve the error. hackathonday1-2 git:(save-button) ✗ npm install f ...

Building web applications using the node.js, vue.js, and express.js technology stack

I'm currently in the process of building a web application using Vue.js, Express.js, and Node.js in the Visual Studio Code IDE on Linux. While following some online guides, I discovered that to create a Vue.js app, the command to use is: vue create m ...

Troubleshooting Problems with Image Width in CSS Styles

I am facing an issue with displaying 3 images in a row side by side. The first image is bigger than the other two, causing them to be pushed down to the next row, which is not what I want. I have created a class and specified the height and width, but it d ...

Error in CURL with node.js, express and mongoDB when server fails to respond with a message

Encountering the issue "Empty reply from server" in CURL when attempting to access "http://localhost:3000/light" var express = require('express'), values = require('./routes/values'); var app = express(); app.get('/light&apo ...

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

Despite the presence of data, MongoDB is not returning any values

I am currently working on a code that utilizes $geoNear to find the closest transit stop to a given GPS coordinate. The issue I am facing is that the result sometimes returns undefined, even though I have confirmed that the data exists in the STOPS collect ...

Having trouble locating the stylesheet for import

Currently utilizing bootstrap and sass, along with Nodejs and grunt. File: app.sss $icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/"; $fa-font-path: "/bower_components/font-awesome/fonts"; $header-height: 50px; ...

ReactJS not responding to Bootstrap toggler button

My Bootstrap toggler button is not working in ReactJS. I did not include the jQuery scripts because I imported Bootstrap at the top. The button should only appear and function on small devices. import React from 'react'; import 'bootstrap/d ...

Understanding MUI5 prop handling

Recently, I decided to experiment with Material UI 5 sx props just for fun. I encountered a bit of confusion while trying to replicate the behavior of the previous MUI 4 makeStyles function. Specifically, I was attempting to pass JSS classnames to sx props ...

What is the best way to vertically center all content, including borders, within the columns?

To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using displ ...