The Bootstrap 5 Navbar dropdown is not as responsive as the dropdown showcased in the official documentation

I tried utilizing Bootstrap 5 to implement a dropdown functionality, but unfortunately, the dropdown on my website isn't behaving as expected. Unlike the dropdown in the official Bootstrap documentation, my dropdown remains open at all times even when it should close upon clicking.

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.dropdown-menu { 
    display: block;
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}
<!doctype html>
<html lang="en">
<!-- Your customized HTML code goes here -->

For reference, here's the link to view the code on CodePen:https://codepen.io/PatriotsForLife/pen/NWeRqLZ

htmlcssdrop-down-menufrontendbootstrap-5

Answer №1

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.dropdown-toggle {
  color: #fff !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.navbar-nav .dropdown-menu { 
    background-color: hsl(210, 45%, 30%);
}

.navbar-nav .dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test-dropdown.css" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
      <div class="container">
        <a href="/Bootstrap-/index.html">
          <img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
        </a>

        <button
          type="button"
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navmenu"
        >
          <span class="navbar-toggler-icon">
        </button>

      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_home_object">Home</a></li>
        <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" data-bs-toggle="dropdown" id="nav_about_object">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Services
          </a>
          <ul class="dropdown-menu">
          <li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_contact_object">Contact</a></li>

        </ul>
      </div>
     
      </div>
    
    </nav>

modify the code snippet to get it working correctly

<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Services
</a> 

css style

.navbar-nav .dropdown-menu { 
    background-color: hsl(210, 45%, 30%);
}

.navbar-nav .dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

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

Examining a specific element node to see if it contains a certain string

When using PHP Unit with Selenium Server, my goal is to verify if a specific element in an xpath contains a certain string value, like this: <table> <thead></thead> <tbody> <tr> <th>1</th> < ...

phphtmlxpathseleniumphpunit

Calculate the total sum of values in a MySQL column and then group the results

I'm currently working on a quiz website and looking to create a leaderboard. The user scores are stored in a database table named 'user_record' with the following structure: 'user_id' - varchar(254) -holds the user id for a score ...

phphtmlmysqlsql

Conceal the server's internal file structure to prevent it from being displayed in sources

When I visit my website and inspect the elements in Google Chrome, I am able to see a list of all the folders on my site under the sources tab. This reveals their original names and allows for the downloading of the entire website code. I am concerned abo ...

phpcss.htaccessjoomlaamazon-ec2

Using Javascript to save basic high scores to a server

My JS game involves updating a score variable. When the game reaches a gameOver state, I want to compare the score to one saved on the server. If the player got a higher score, I'd like to overwrite the previous high score with the new one. If it&apos ...

javascriptphphtmlcssserver

Is there a way to prevent Django from automatically sanitizing HTML when inserting it into a template?

I'm feeling a bit puzzled about this situation because it appears that Django templates offer optional HTML filters, yet there seems to be an automatic process at play.. I am working on creating a demo app where the user triggers an action that execut ...

pythonhtmldjangotemplateshtml-sanitizing

The div stops scrolling after the Matrix3d transformation is applied, causing the scrolling functionality to cease

The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

htmlcssthree.jstransformation

Is there a way to summon a div to be positioned beneath another div within the same HTML document?

I am looking to target a specific div by its class, in order to place it under another div. Both divs are within the same HTML file, but I prefer to keep them separate for organizational purposes. Here is an example of what I am trying to achieve: <d ...

jqueryhtmlcallnested

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

Utilizing a constant variable and the setTimeout function to initiate an animated menu display

I'm currently utilizing jQuery to enhance my dropdown menu functionality by toggling the active class defined in my CSS. However, I've encountered a difficulty in adjusting the timeout for one of the elements. Below is some pseudo code to clarify ...

htmljquerycss

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

The font implemented in Bootstrap does not appear to be adapting well to different

As I embark on the Bootstrap journey, I find that everything looks great on my desktop browser in terms of responsiveness. However, when I switch to my iPhone 6, it doesn't seem to display as expected... Provided below are a few screenshots: Desktop ...

csstwitter-bootstrapfontsresponsiveness

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

I am currently working on a website using node.js and have created two routes: /home and /contact. Everything was functioning properly until I added CSS and JS files to both routes. For some reason, the second call does not work as expected. When I access ...

htmlnode.jsexpressejsstatic-files

Header on top of table that stays in place with scrolling

I'm facing an issue with a table that contains user-generated data. We are utilizing a plugin known as Clusterize, which allows us to smoothly scroll through large amounts of rows. However, the specific markup required for this plugin seems to be caus ...

javascriptjquerycssclusterize

Creating a directory using PHP's `mkdir` function with special characters results in a

My approach involves using special characters to display galleries-folders on the main page. The folders are created based on user input and I prefer not to use special characters in URLs, but rather to show content through the use of glob. $foldername= $ ...

phphtmlforms

Fade-in effect on one DIV element impacting the values of other div

As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...

jquerycsshtmlfadeout

Create a dynamic HTML table as the page loads

Customize for vhinn This is the desired output: I am currently attempting to dynamically create an HTML table on pageload using variables retrieved from a database. Here is a simple example of HTML code: http://jsfiddle.net/jdv590/daCum/1/ Code snippet ...

asp.nethtmlloopsdynamic

Encountering an Uncaught TypeError that is hindering an alert for the score, but I am uncertain about the solution despite the game functioning properly

My Yahtzee code is functioning normally during gameplay, but I'm facing issues with getting alerts for the total score and bonus points. I have identified where the problem lies but I am unsure how to resolve it. I attempted debugging through alerts, ...

javascripthtmltypeerror

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

javascriptjqueryhtmlangularjs

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

phpjquerycssfile-uploadjasny-bootstrap