The dropdown menu on the navigation bar refuses to open

I am having trouble adding a dropdown menu to my navbar. The menu button is not dropping down the menu as expected.

Additionally, the profile picture and name are appearing in the center instead of on the right side.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef0eef0eda2a5b4a1f3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar fixed-top navbar-light bg-light">
    <div class="container-xxl">
        <a class="navbar-brand" href="#">
            <img class="d-inline-blockp" src="" alt="" width="40"
                height="40" />
            Left
        </a>
        <a class="navbar-brand" href="#">
            <img src="" alt="profile picture" width="40"
                height="40" />
            Name
        </a>
        <div class="">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hamburger"
                aria-controls="hamburger" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="hamburger">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Pricing</a>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </div>
            </div>
        </div>
    </div>
</nav>

Answer №1

Menubutton is not functioning properly because the bootstrap starter script has not been included in your HTML file.

To resolve this issue, ensure that you add the script to either the head tag or inside the body tag of your document.

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637d637c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 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

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

Adjust the size of the font in your Bootstrap Table

I've been utilizing the Bootstrap table feature and it's been fantastic, but I've encountered an issue with changing the font size. I've referred to the example on , however no matter what adjustments I make to the size, it doesn' ...

HTML textarea content will update automatically whenever there is an input change in JavaScript

Everything seems to be working as expected, but I noticed that the onmouseover event only triggers once. Is there a way to make it work multiple times, i.e., every time the text array changes? <html> <head> <script> function myFunct ...

Choose the ancestor of an element that possesses a specific class

I created a navigation bar with the following structure: <ul class="nav"> <li class="active"><a href="blah.html">S</a></li> <li><a href="blah1.html">S1</a></li> <li><a href="blah2. ...

modifying the identification value in HTML and then reverting it

Although this may seem like messy code, I'm really in need of assistance with a problem that has stumped me. Currently, I am working on an E-shop project where I have modals for displaying products. Within these modals, there is a button that allows u ...

VueJS radio button not triggering change event as expected

Looking for a way to manage when a new radio button is chosen in Vue? Below is the snippet of code I initially used: HTML File <div id="app"> <input type="radio" id="male" name="gender" value="m" ...

Mobile devices consistently experiencing issues with JavaScript generated elements overlapping

I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devic ...

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

What is the process for Bootstrap-4 to substitute an HTML checkmark entity with its own style?

When I use the HTML entity &#10004; to create a checkmark on my page, it appears as desired - a simple black checkmark. However, after adding Bootstrap to my site, this checkmark is transformed into a bordered green checkbox with sharp corners. I am ...

The ng-class styling isn't being implemented

I am facing an issue with updating the text color inside a div tag based on values from an array within an ng-repeat. While the value is correctly set during debugging, the color does not display properly. <div ng-class="sel.fav == 'Y' ? &apo ...

Can you provide step-by-step instructions for creating a customized CSS dropdown menu?

Need some help with my code. I have a header that I don't want to change much, but I'd like to add a dropdown menu without using a list. Here's my code: <!-- Navigation Bar --> <div class="navbar"> <div class="button_l"& ...

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...

Guide to creating a mouseover effect where a hover div smoothly slides in from the side

Recently, I stumbled upon a WordPress theme that caught my attention: One particular feature that intrigued me was the translucent div that slides over a tile when hovered. After inspecting the page source, I am still unsure of the technique used to achie ...

Contrasting views when viewing content on localhost versus accessing it over a network

After creating a bootstrap web portal that appeared fine when viewed on my pc using Wampserver localhost, I encountered issues when accessing it through the office network. Apparently, elements that should have spanned horizontally were now spanning vertic ...

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

What steps can be taken to extend the duration that the HTML necessary validation message is displayed?

Is it possible to extend the duration in which the HTML required validation message is displayed? Currently, it seems to appear for too short a time. https://i.sstatic.net/DdqH6.jpg ...

How to choose a single checkbox in Ionic 2 and retrieve its value

On my single screen, I have about 20 questions and answers retrieved from a database. To display the options, I am using checkboxes but struggling to implement the desired functionality. What I want is to allow only one checkbox selection out of 4 options ...

Is there a way to render form elements inactive or unchangeable by enveloping them with a

Is there a way in HTML to selectively mark multiple input elements as either readonly or disabled without affecting the entire form? I am aware that you can disable an entire form, but is there a method to apply this setting to individual inputs only, per ...

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

In JavaScript, what causes the gap between divs in the regular flow of a webpage?

My goal was to align two divs next to each other within a container div, but for some reason the second div ended up below the first with a 4 pixel gap in between. Despite setting margins, padding, and borders to 0px, this gap persisted. Here's the co ...