Having a similar issue to this one. I am trying to remove the focus feature from links in the navigation bar. The links:
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 active">First</a></li>
<li><a href="#" class="nav-link px-2">Second</a></li>
</ul>
I've tried using the outline style to disable this feature:
<style>
.nav-link {
color: #888888;
}
.nav-link:hover {
color: black;
}
.nav-link:focus {
outline:none;
}
.active {
color: black;
}
</style>
However, it is still displaying the unwanted blue effect: https://i.sstatic.net/05kvx.gif
I don't want to change the color of the focus effect as neither black nor #888888 would be appropriate in my case. I simply want to disable this behavior.
It seems to be related to .nav-link:focus because changing outline:none; to color:red; changes the focus effect to red.
Things I have attempted include:
outline: none;
outline: 0;
outline: 0 !important;
outline: 0 none !important;
The complete header code (after applying color: initial and outline: thin dotted;):
.nav-link {
color: #898989;
}
.nav-link:hover {
color: black;
}
.nav-link:focus {
outline: thin dotted;
text-decoration: none;
color: initial !important;
}
.active {
color: black;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780d160b160815595448505909">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<header class="p-3 text-bg-light">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 active">First</a></li>
<li><a href="#" class="nav-link px-2">Second</a></li>
</ul>
</div>
</div>
</header>