Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works smoothly, but if the dropdown is clicked instead of hovered over, and then the cursor is moved away from the menu, the dropdown turns white.

Check out what it looks like https://i.stack.imgur.com/3oFwp.jpg

@import "./.fonts.css";
:root {
  --desktop: 1200px;
  --laptop: 992px;
  --tablet: 768px;
  --mobile: 576px;
}

body {
  background: hsl(233, 47%, 96%);
  font-family: 'Montserrat', sans-serif;
}

#copyright {
  border-top: 1px solid hsl(0, 0%, 20%);
}

.c-item {
  height: 900px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

#team-img {
  height: 100%;
  object-fit: cover;
}

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

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

h3:after {
  background: none repeat scroll 0 0 hsl(210, 55%, 41%);
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 100px;
}

h3 {
  font-weight: 300;
}

#sub-header {
  color: hsl(18, 100%, 62%);
}

#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 white;
}


/* @media (min-width: 576px) {
    
} */

footer a i {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  color: white;
}


/* SMALL MEDIA QUERY */


/* @media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) { */

.dropdown:hover>.dropdown-menu {
  display: block;
  background-color: hsl(210, 45%, 30%);
  margin-top: 0;
  width: 175px;
  .btn {
    color: hsl(0, 0%, 100%);
  }
  .dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
  }
}

footer li:hover {
  color: hsl(24, 83%, 65%);
  transition: 0.2s;
}

footer i:hover {
  color: hsl(24, 83%, 65%);
  transition: 0.2s;
}


/* @media (min-width: 576px) {
        .nav-link::after {
            content: '';
            opacity: 0;
            transition: all 0.2s;
            height: 2px;
            width: 100%;
            background-color: hsl(18, 100%, 62%);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        .nav-link:hover::after {
            opacity: 1;
            transition: all 0.2s;
        }
    } */


}
#nav_object {
  position: relative;
}
.nav-link:hover {
  /* text-decoration: underline; */
  /* border-bottom: 2px solid  hsl(18, 100%, 62%); */
}
#nav_object::after {
  content: '';
  opacity: 0;
  transition: all 0.2s;
  height: 2px;
  width: 100%;
  background-color: hsl(18, 100%, 62%);
  position: absolute;
  bottom: 0;
  left: 0;
}
#nav_object:hover::after {
  opacity: 1;
}
.nav-item a {
  position: relative;
}

.dropdown-toggle {
    color: white !important;
    }
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec0">[email protected]</a>/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/dropdown.css" />
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bea3bd">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>


  </head>
  <body>
    
    <!-- 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>

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

        <!-- TOGGLE MENU START -->
      <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_object">Home</a></li>
        <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_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" id="">
          Services
          </a>
          <ul class="dropdown-menu">
          <!-- <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li> -->
          <!-- <li><hr class="dropdown-divider"></li> -->
          <li><a class="dropdown-item   text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white " href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white" href="/Bootstrap-/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white " href="/Bootstrap-/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white " href="/Bootstrap-/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white " 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_object">Contact</a></li>

        <script>
          // Get the Services dropdown link element
          const servicesDropdown = document.getElementById('servicesDropdown');
        
          // Redirect to the services page when the dropdown link is clicked
          servicesDropdown.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default link behavior
            window.location.href = this.getAttribute('href');
          });
        
          // Add the hover effect on desktop devices
          if (window.matchMedia('(min-width: 576px)').matches) {
            // When the mouse enters the dropdown link, show the dropdown menu
            servicesDropdown.addEventListener('mouseenter', function() {
              this.setAttribute('aria-expanded', 'true');
              this.nextElementSibling.classList.add('show');
            });
        
            // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
            servicesDropdown.addEventListener('mouseleave', function() {
              this.setAttribute('aria-expanded', 'false');
              this.nextElementSibling.classList.remove('show');
            });
          }
        </script>
        <!-- TOGGLE MENU CLOSE -->

        <!-- LOGIN/SIGNUP MODAL SECTION START -->
    
        <!-- <button 
          type="button" 
          class="btn btn-primary" 
          data-bs-toggle="modal" 
          data-bs-target="#loginmodal"
        >
          Login/Signup
        </button>
        <div id="loginmodal" class="modal fade">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-body">
                <button
                 
                  type="button" 
                  class="btn-close btn-close-white" 
                  data-bs-dismiss="modal" 
                ></button>
                <div class="myform bg-dark">
                  <h1 class="text-center" id="modal-styling">Login Form</h1>
                  <form action="#">
                    <div class="mb-3 mt-3">
                      <label for="email">Email Address</label>
                      <input type="email" class="form-control">
                    </div>
                    <div class="mb-3 mt-3">
                      <label for="password">Password</label>
                      <input type="passeord" class="form-control">
                    </div>
                    <button type="button" class="btn btn-light mt-3">LOGIN</button>
                    <p id="modal-styling">Don't have an account? <a href="#" id="modal-styling">Signup</a> </p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div> -->
    <!-- LOGIN/SIGNUP MODAL SECTION CLOSE -->
        </ul>
      </div>
      <!-- TOGGLE MENU CLOSE -->
      </div>
    
    </nav>
    <!-- NAVIGATION BAR CLOSE -->




   
  </body>
</html>

htmlcssfrontendnavbarbootstrap-5

Answer №1

I'm having trouble replicating the issue shown in your screenshot. However, when I hover over an item in the dropdown with a white background, I noticed that the culprit is a line of code in the bootstrap CSS file: 

background-color: var(--bs-dropdown-link-hover-bg);

To fix this, you can override the CSS variable like so:

.dropdown-menu{
  --bs-dropdown-link-hover-bg: hsl(210, 55%, 41%) !important;
}

This change should resolve the white background issue. I've also removed some redundant CSS code where you were attempting to set the same color.

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

Dropdown button split aligned with its first button

Comparing the alignment of split button dropdowns in Bootstrap 3 and Bootstrap 4, I find that Bootstrap 3 aligns them to the left of the first button, while Bootstrap 4 only aligns them according to the second button. https://i.stack.imgur.com/gAt78.png h ...

csstwitter-bootstrapbootstrap-4

Combining CSS and JS files for accordion list - experiencing issues when used separately

Recently, I've been trying to create an accordion list and stumbled upon some code (HTML, CSS, and JS) on www.w3schools.com. When I have the code all in one document and run it as a single .html file, everything works perfectly. However, when I split ...

cssjavascripthtml

The input box within the form is insufficiently sized

My task is to generate textareas with custom parameters like "cols" and "rows" and display them in forms. However, these parameters seem not to be functioning as expected. Whether I set cols=1000 or cols=1, there is no difference in the output. After revie ...

htmlformstextarea

IE is notorious for not playing well with CSS

I am facing an issue with my Google search box code. It works perfectly on Firefox, Chrome, and other browsers except for Internet Explorer. Can anyone help me troubleshoot this? Below is the code snippet: Abulkas Tablet #outerContainer{ width: ...

htmlcss

In Chrome, the height of 100% is not functioning properly within the <div> element

I've been struggling with a problem that I've searched the internet for solutions to, but haven't been able to resolve. The issue revolves around an iframe containing a page that loads specific CSS rules. html, body { position: relative; he ...

csswebkit

Canvas ctx.drawImage() function not functioning properly

I've encountered an issue while trying to display images in a canvas using my rendering function. Here is the code snippet: function populateSquareImages(){ for(var i = 0, ii = squares.length; i < ii; i++) { if(squares[i].hasImage) { ...

javascripthtmlcanvasdrawimage

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligne ...

htmlcssvue.jsvuetify.js

I am looking to insert a jQuery value or variable into the plugin options

How can I insert a jQuery value or variable into plugin options? This is my current script: $(document).ready(function() { // var bannerheight = 580; if ($(window).width() < 2100) { var bannerheight = 410; var opts = JSON.parse( ...

javascriptjqueryhtmljquery-pluginsrevolution-slider

refers to the spacing between elements

I currently have 4 nested divs. My goal is to ensure that the margins between each div are equal, maintaining the same distance from the left edge of the parent div to the first nested div, between each pair of nested div, and from the last nested div to t ...

htmlcss

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

phpjavascripthtmlwordpressforms

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

Deciphering the :host attribute in CSS: A guide

When using Selenium to query the CSS properties of an element, I noticed that even though the actual background color is white, the returned value for background-color is always #000000. This issue arises in an Ionic-built app. Upon inspecting with Chrome ...

cssseleniumwebdriverbackground-colorvalue-of-css-property

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

javascripthtmlfirebasegoogle-cloud-firestore

I kindly request your assistance in resolving the issues with the append() and empty

Here is some code I've been working on: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ ...

javascriptjqueryhtml

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

javascriptcssxmltwitter-bootstrapxpages

Having trouble figuring out how to load images into a div based on the current page location?

Looking for a solution to my problem - I have a navigation bar with a fixed div (A) on the far right side. The nav bar remains at the top of the page. There are 6 sections in the body of the page, each being 1200px tall divs. What I want is for a different ...

javascriptjqueryhtmlcss

Spread out the items within an inline block

Is there a way to create space between icons that are in an inline block without them touching each other? One solution could be to add a container around each icon, center the icons within the containers, and then place the containers in the block. You c ...

htmlcss

The utilization of media within the meta in Next.js is not allowed

Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...

htmlnext.jsmeta-tags

When attempting to use the jsonify method on a variable within an html file, the output is not displayed

Is it possible to store "jsonify" in a variable? I find the pure json format of "return jsonify(data)" unappealing, so I am looking for a way to enhance it using an HTML template with proper indentation. Here's the python code I have: from flask impo ...

pythonhtmljsonflask