What is causing the dropdown menu to change colors to blue when hovering over the dropdown items?

I've noticed that my Bootstrap is causing the dropdown color to turn blue when I hover over a dropdown item. Despite trying different solutions, all my attempts have been unsuccessful. I suspect that it is due to bootstrap but I can't seem to find the right solution. I managed to prevent the dropdown items from turning blue, but I am unable to change the title of the dropdown.

Here is the current output:
https://i.sstatic.net/lgatW.png

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.top-navbar {
  background-color: #333;
  height: 40px;
}

.top-navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.top-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.top-menu li {
  margin-right: 0px;
}

.top-menu li:last-child {
  margin-right: 0;
}

.top-menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.top-menu li a:hover {
  color: #fff;
}

.top-menu .dropdown-item {
  color: #333;
  /* Grey text color for the dropdown items */
}

.top-menu .dropdown-item:hover {
  color: #333;
  /* Grey text color for the dropdown items */
}

.main-navbar {
  background-color: #fff;
  height: 80px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

.main-navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-container {
  width: 80px;
}

.logo {
  width: 100%;
  height: 100%;
}

.menu-container {
  display: flex;
  align-items: center;
}

.menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.menu li {
  margin-right: 20px;
}

.menu li:last-child {
  margin-right: 0;
}

.menu li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

.icons {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.cart-icon {
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

.logo-container {
  width: 78px;
  height: 100%;
  display: flex;
  align-items: center;
}

.logo {
  width: 100%;
  height: auto;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: transparent;
  /* Set the background color to transparent */
  color: inherit;
  /* Inherit the text color from the parent element */
}

.top-menu li .dropdown-item a:hover {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Document>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body>
  <header class="header">
    <nav class="top-navbar" data-bs-theme="dark">
      <div class="top-navbar-container">
        <ul class="top-menu">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Name
                        </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="logout.php">Logout</a></li>
              <li class="nav-item">
                <a class="nav-link" href="register.php">Register</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="login.php">Login</a>
              </li>
            </ul>
            <div class="icons">
              <a href="cart.html"><i class="fa-solid fa-cart-shopping fa-xl"
                                    style="color: #0000ff;"></i></a>
            </div>
          </li>
      </div>
    </nav>
    <nav class="main-navbar">
      <div class="main-navbar-container">
        <div class="logo-container">
          <img src="Noah Grocery Logo.png" alt="Grocery Store Logo" class="logo">
        </div>
        <div class="menu-container">
          <ul class="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="support/support.html">Support</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

</html>

Just to clarify, Bootstrap is not included in the code snippet. I have attempted various online recommendations, but none of them have resolved the issue.

Answer №1

Have you experimented with a solution similar to this:

.nav-link:hover {
    color: #fff;
}

By using this code, you can target the nav-link element directly.

For a visual representation, check out this CodePen.

Answer №2

After some trial and error, I finally cracked the code. Turns out, I needed to include the style directly in the HTML code for it to take effect. A big thank you for all your assistance!

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

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below: import React from 'react'; import styled f ...

Is it possible to turn a <span> element into a clickable hyperlink?

Can a span be turned into a clickable link? I have successfully made a span with only a background image (using the Gilder/Levin image replacement technique) into a clickable link. This seems to work well on my desktop in Chrome, Opera, and IE 11. Is thi ...

Enhance your Divi theme with Elegant Themes: Explore mobile-friendly background image zoom effects

I have a regular section module with an image as the background. The design looks great on desktop but appears zoomed in and blurry on mobile devices. I'm struggling to understand why the mobile view is not adjusting properly, and I am unsure if there ...

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...

Generating values in a loop - mastering the art of creating data points

My goal is to create a variable within a loop: box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFand so on... The concept is simple: box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff. I attempted to achieve this ...

I am experiencing issues with the interpolation of my SASS variables when they are placed into

I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...

HTML tables with stripes and row spans

I found the initial table on this link. After reviewing the original table, I am looking to make modifications as shown in the highlighted image below. However, when attempting to add rowspan and colspan attributes to the td elements, I encountered an iss ...

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

Include a legal disclaimer on a website comprised of individual pages

The website at was uniquely crafted by hand, without the use of platforms like Wordpress or any PHP-type databases. Upon its creation over 15 years ago, a legal notice was not initially included on the website. Now, there is a desire to add a link to a l ...

What is the best way to maintain a div centered when the browser window shrinks smaller than the div's dimensions?

Is there a way to keep a div centered and create white space around it when the browser window is resized? I want this effect to happen whether the browser window gets larger or smaller. Currently, when the window size decreases, the left side of the div l ...

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clickin ...

Ways to switch sidebar menu using only CSS?

How do I create a BS4 sidebar menu that toggles on click and replaces an icon? See the code below: .toggle { display: none; } .menu-head label { color: black; cursor: pointer; } .container { overflow: hidden; display: inline-block; } .si ...