I am experiencing an issue with setting the border to none using .navbar-toggler

I'm currently utilizing bootstrap 5, and I've encountered an issue with setting the border and outline to none in my CSS file. Specifically, when I apply these properties to the nav-toggler class, it seems to have no effect.

.menu-bar .navbar-toggler{
    padding-right: 20px;
    outline: none!important;
    border: none!important;
}
The problem persists with my nav links as the border remains visible.

Below is a snippet of my HTML code:

<div class="header">
  <div class="menu-bar">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <img src="{% static 'TableauDeBordMjc/images/logo_mjc.png' %}" alt="">
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav float-end">
            <li class="nav-item">
              <a class="nav-link" href="#">Accueil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nouveau</a>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
               Logs
              </a>
              <ul class="dropdown-menu" >
                <li>
                  <a class="dropdown-item" href="#">Adhérents</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Salariés</a>
                </li>
              </ul>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                <i class="fas fa-user"></i>
              </a>
              <ul class="dropdown-menu pull-right" >
                <li>
                  <a class="dropdown-item" href="#">Déconnexion</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

Does anyone have any insight into why this might be happening? Additionally, I have included the following script before closing the body tag:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607e607c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

For reference, here is an image of my website enter image description here

Thank you

htmljquerycssbootstrap-5

Answer №1

If you want to get rid of the border, simply add the border-0 class directly to the element.

<button class="border-0 navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

To remove the outline, you can refer to this solution. However, if you are looking to make changes, consider using the box-shadow property.

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}

Answer №2

It's strange that this didn't work before, but after downgrading, it's now working perfectly.

Big thanks to everyone who offered their 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

Tips for animating a nested array using jQuery

I have a border that is 9x9 with lines, columns, and squares, similar to a Sudoku border. I want to animate it, but I encountered some issues when trying to run multiple animations simultaneously. To solve this problem, I decided to animate one array of el ...

javascriptjqueryarraysanimation

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

I have recently created two radio buttons using <i> font icons. Previously, I had successfully used the same code to create a checkbox, so I applied it to the radio buttons as well. After fixing the positioning, everything seemed fine when interactin ...

javascripthtmljquerycssbootstrap-4

Send information using either ajax or ajax(json) to interact with PHP on the same webpage

I am currently working on a messaging application. My main objective is to retrieve the sender ID and receiver ID by clicking on a single button. Once I have these IDs, I want to send them using AJAX or AJAX(JSON) to PHP within the same page. In PHP, I wi ...

phpjqueryjsonajaxpost

When utilizing ajax in an MVC framework, an error was encountered due to the conversion of a datetime2 data type to a datetime data type resulting in an out-of

When trying to send data from ajax to the controller, I am encountering a title error. Oddly enough, when checking the datetime, it appears to be correct and displaying the current time accurately. Despite this, the same error persists. I have noticed tha ...

c#jqueryajaxasp.net-mvcdatetime

What causes the order of `on` handler calls to be unpredictable in Angular?

Below is the code snippet I have been working on function linkFunc(scope, element, attr){ var clickedElsewhere = false; $document.on('click', function(){ clickedElsewhere = false; console.log('i ...

javascriptjqueryangularjs

What is the best way to incorporate a background image that complements my content?

I'm currently working on revamping my friend's windsurf club website. The issue I'm facing is with trying to achieve a more elegant appearance by positioning a background image behind the <h1> and <h2> elements. Currently, I have ...

htmlcssbackground-imagebootstrap-5

Tips for validating the input type "password"

Below is the Jquery Script that I am using: $(document).ready(function(){ $("#myForm").validate({ rules: { username: { required:true }, password: { required:true ...

javascriptjqueryjquery-validate

gRaphael - the struggle of animating a line chart

Encountering an issue with the gRaphael javascript line chart library. Creating a line chart from a CSV file with five columns (# of minutes, time, waiting time, in treatment, closed, in location). Previously drew full chart without animation successfull ...

javascriptjqueryraphaelconflictgraphael

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

I have created a unique jQuery plugin that involves utilizing two nested <DIV> elements. The outer div is set with a fixed width and overflow: scroll, while the inner div (which is wider) houses the content for scrolling purposes. Everything is fun ...

javascriptjquerycssscrollbar

Eliminating choices from a dropdown list using jQuery

I am currently working on a page that contains 5 dropdown menus, all of which have been assigned the class name 'ct'. During an onclick event, I want to remove the option with the value 'X' from each dropdown menu. My current code snipp ...

javascriptjqueryhtml-select

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

What is the best way to reveal a hidden div using JavaScript after a form submission?

jQuery is not a language I am very familiar with, but I am attempting to display a simple animated gif when a form is submitted. When users click 'submit' to upload an image, I want the gif to show to indicate that the image is being uploaded. Th ...

javascripthtml

Issue with the alignment of columns in a datatable

Tools: Bootstrap 5, JQuery, Datatables Description of the issue: I am facing a problem with a page that utilizes Bootstrap navtabs. One tab contains a chart, while another tab features a table created using Datatables. The table styling remains intact whe ...

datatablesbootstrap-5datatables-1.10

Is it possible to create a hyperlink in the <button> element?

Having been immersed in HTML5 for quite a while now, I recently encountered a challenge while working on my login/register page project. I wanted to create a button that would redirect me to another HTML page upon clicking. While I am familiar with the < ...

javascripthtml

Using either jQuery 1.9.1 or PHP, you can insert a value into an input field by combining the current input value with a specific column name

Below is the table structure I am working with: <table class="authors-list" border=0 id="ordertable"> <tr> <td ><input type="text" id="product_1" name="product_1" class="rounded"/></td> <td ><input type=" ...

phpjquery

Issue occurred while attempting to resolve tab panel identification for incorporating tab panes within Razor Pages code

So I've run into a bit of a snag here. I'm fairly new to working with Bootstrap and Razor Pages, and I can't seem to figure out why I'm encountering this error. My current project involves implementing tabs and their corresponding tab ...

tabsbootstrap-5razor-pages

Displaying BlockUI Growl notifications at the bottom right using Jquery

I have successfully implemented a growl notification using BlockUI for jquery. However, I am facing an issue where the notification is appearing at the top right and I want it to be at the bottom right instead. After modifying the CSS property to bottom:1 ...

jquerygrowlblockui

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

I am currently working on creating my own component to use within an *ngFor loop. I am facing an issue where I need a unique value for my Collapse feature. Right now, when I click on the second main row in the table, the collapse feature only shows the inn ...

htmlangularbootstrap-4

Issue with Magnific Popup lightbox functionality, and mfp-hide is ineffective

Hello everyone, I am new to stackoverflow so please bear with me as I navigate through it. Although I am still a beginner in HTML, CSS, and JS, I have been using them for work on occasion. Recently, I implemented Magnific Popup on a website I am working o ...

javascriptjqueryhtmlcssmagnific-popup

Show the initially chosen option in a dropdown menu when updating a record using mysqli

I recently came across a PHP page that handles relocation requests and allows users to edit them as needed. While the add page features dropdown boxes, the edit page simply displays them as text fields. This makes it difficult for users to select a differ ...

phphtmlmysqlidrop-down-menu