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

Exploring the use of Shadow DOM in ContentEditable for securing text segments

I have recently been working on creating a basic text editor using ContentEditable. The main requirement for the application is to allow users to insert blocks of text that are protected from typical editing actions. These protected text blocks should not ...

javascripthtmlcontenteditableweb-componentshadow-dom

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

phpjavascripthtmlmysql

Web page containing information from IPv6 and IPv4 sources exclusively

Is it possible to have an HTML5 page accessible through both IPv4 and IPv6, while only allowing CSS style and JavaScript from other domains via IPv4? Unfortunately, it seems that this setup does not function properly for pure IPv6 connections. Will th ...

javascriptcsshtmlipv6

BlazorBootstrap 5 feature: merging equal-width columns with custom width configurations

I recently completed a tutorial on bootstrap 5 and have a question about its responsiveness. From what I gathered, the rules apply from small to large (e.g. first sm, then md). The initial rule applied is the general rule without sizes (e.g. col-12). Now, ...

c#blazormultiple-columnsbootstrap-5

What steps can be taken to address the ElementNotInteractableException error thrown by the sendKeys function in Selenium WebDriver?

In my quest to improve my skills in Selenium WebDriver, I decided to test my abilities by visiting the Twitter login page and attempting to log in. After some trial and error, I was able to successfully navigate to the page and locate the desired element f ...

javahtmlseleniumselenium-webdriversendkeys

What is the best way to use jQuery to increment the number in an input field by a specific value?

My goal is to utilize jQuery to increment a number in an input field and then display the updated value in the same input field. The specific id of this input field is "total". Here's my attempt so far: function addBag(){ var bagprice = 79.99; ...

javascriptjqueryhtml

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

Struggling to make align-content function properly in a CSS flexbox layout grid

Utilizing CSS flexbox for designing a grid of items that wrap on resizing the page. Wanting to achieve a horizontally centered grid, successfully done with justify-content: center;. However, facing an issue where the last box in some cases is centered inst ...

htmlcssflexbox

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

There seems to be a glitch in my PHP comment validation function—it does not seem to be functioning

This form is contained in a PHP file named single.php. <form action="comments.php" method="post" > <?php include(ROOT_PATH . "/app/helpers/formErrors.php"); ?> <input type= "hidden" name="id" value= & ...

phphtml

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

The method for connecting the width of a panel to the height of the viewport in Ext Js

I'm looking to automate the adjustment of a panel's height based on the viewport's height using Ext js. Although achievable using listeners, I believe utilizing Ext js variable binding would be more efficient. However, I've encountered ...

javascriptcssextjsextjs6-classicextjs6.5

Show schedule in an HTML chart

I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below: The table itself is quite simple, but I am having trouble figuring out how to effectively display the timeline ...

jqueryhtmlcss

A guide on how to use Bootstrap to align elements at the center of a div container

My attempt to center an image in the div didn't quite work out as planned. Here's the snippet of my html and css: .col-xs-4 { background-color: lightgrey; width: 300px; height: 200px; border: 6px solid green; padding: 25px; margin: ...

htmlcsstwitter-bootstrap

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding

showing a pair of divs in a split layout on the homepage

I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image. These divs are contained within a flex-parent, giving them an inline-block appearance ...

htmlcssbootstrap-5

Unexpected element layout issues

Attempting to create a basic website that utilizes the flickr api, retrieves photos and details, and displays them using bootstrap. However, there seems to be an issue that I am unsure how to resolve. Currently, my code is functioning like so: https://i.s ...

javascriptjqueryhtmltwitter-bootstrap

Update breadcrumbs dynamically by clicking on each horizontal panel

I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simul ...

javascriptjqueryhtmlcssbreadcrumbs

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

javascripthtmlcss