Tips for eliminating the border from a Bootstrap dropdown menu in the navigation bar

I am utilizing the Bootstrap 5 navigation bar and trying to figure out how to remove the blue border from the "Dropdown" when clicked on. Despite my efforts to find a solution, I have been unsuccessful.

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand m-1" href="#">
      <img src="/static/wg_logo.svg" width="30" height="30" alt="">
    </a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" href="#">Navitem1</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" href="#">Navitem2</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" href="#">Navitem3</a>
        </li>
      </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity=" sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
htmlcssbootstrap-5

Answer №1

Please insert your CSS code here :)

.nav-item.active, .nav-item:active {
    background-color: transparent !important;
    color: black !important;
}

.nav-item:hover {
    background-color: transparent !important;
}

Answer №2

You can verify that the blue background-color is applied to .active and :active, and you have the option to remove it by targeting these instances.

.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active {
  background-color: transparent;
  color: unset;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736c736e">[email protected]</a>/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand m-1" href="#">
    <img src="/static/wg_logo.svg" width="30" height="30" alt="">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Dropdown1</a>
          <a class="dropdown-item" href="#">Dropdown2</a>
          <a class="dropdown-item" href="#">Dropdown3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" href="#">Navitem1</a>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" href="#">Navitem2</a>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" href="#">Navitem3</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3acb3ae">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe6fbe4">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer №3

After loading all necessary CSS in the <head> </head> section, make sure to include custom CSS for dropdown customization.

<style>
.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active {
  background-color: transparent !important;
  color: unset !important;
}
</style>

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

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

htmlcss

Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE .events-details-list{ opacity:0; transition: all 0.3s ease-in-out; position: absolute; left: 0; rig ...

htmlcssmobile

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...

cssresponsive-designmedia-queries

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

javascriptjqueryhtmlcssajax

What is a method to adjust the height of a paragraph element in AngularJS based on user interaction?

Is there a way to dynamically adjust the height of a paragraph element in Angular when clicking on a "Show More" button? I want the button text to change to "Show Less" and shrink the paragraph back down when clicked again. What would be the most effective ...

javascripthtmlangularjs

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

What is the best way to generate unique mousedown callbacks on the fly?

My goal is to create multiple divs, each with a unique mousedown callback function. However, I want each callback function to behave differently based on the specific div that is clicked. Below is the code I have been using to create the divs and set the ...

javascriptjqueryhtmlcssmousedown

CSS animation is supported on most browsers with the exception of Safari

I'm facing an issue with my animation that works fine on all browsers except Safari. I've tried using the autoprefix extension in VSCode to automatically add CSS vendor prefixes, but the animation still isn't functioning correctly. Here&apo ...

htmlcsssafari

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

What are some ways to maintain the aspect ratio of an image with two dimensions?

Issue: The image is taller than the img-box container https://i.stack.imgur.com/zDBLM.png I have identified two potential solutions, but I am not satisfied with them: Removing the img-box wrapper Applying max-height and max-width properties to the img t ...

css

Support for these CSS properties of left: 0; and right: 0; are compatible with

Just wondering if it's okay to utilize the CSS code below to ensure the element adjusts to its parent's width. .element { position: absolute; left: 0; right: 0; background-color: #ccc; border-top: 1px solid #ddd; } We don&ap ...

htmlcss

Select elements to apply styles to all child elements except the initial one

In the following HTML snippet, we have a div#parent with multiple child elements: <div id="parent"> <div id="ch1"></div> <div id="ch2"></div> <div id="ch3"></div> .... <div id="ch1234">&l ...

htmlcsscss-selectors

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

"Exploring the interactivity of touch events on JavaScript

Hi there, I'm currently facing an issue with the touch events on my canvas. While the mouse events are functioning correctly and drawing as expected, incorporating touch events seems to be causing a problem. When I touch the canvas, the output remains ...

javascripthtmlcanvastouchoffset

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

Using JavaScript to we can transfer the function result to an HTML input field

Is there a way to display the result of a JavaScript function in an HTML input field? Here is an example form: https://i.sstatic.net/HHHl2.png When I click "Run - Script," the following simple script is executed: <button type="submit" class="btn btn ...

javascripthtmlbootstrap-4

Trouble submitting lengthy text in HTML form

Creating a simple HTML form <form method="post" action="process.php"> <label>First Name</label> <input type="text" name="first_name" /> <br /> <label>Last Name</label> <input type="text" nam ...

phphtmlforms

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

My element has the CSS properties position:fixed and width:100%, causing it to be larger than its parent elements. Despite the complexity of my code, I have attempted to simplify it for better understanding. Below, you can see that the green box exceeds ...

javascripthtmlcss

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

javascriptjqueryhtml

Creating a responsive design for mobile apps in Ionic using CSS

I need help with making my Ionic app responsive across all mobile devices. The design on the page was created using CSS, but it is not displaying properly on every device. How can I ensure that it adapts to different screen sizes? <template> <Io ...

javascripthtmlcssionic-framework