Pretty much my problem minus the buttons - my issue applies to anchor links: How to stop buttons from staying depressed with Bootstrap 3
I am using Bootstrap 3 (testing in FF & Chrome), and my .navbar is fixed with a scrollspy function. When I click on a nav link, the link stays in Focused mode (and while scrolling without clicking outside - my nav now shows both links! [1 active/1focus]), and the only way to remove the focus state is to click anywhere outside the nav. Focus state is not a visible issue in Safari.
How would I go about UNfocusing the nav link automatically with mousedown/mouseup instead?
EDIT: Mouseup/mousedown was not the underlying issue as previously thought.
My #nav in case anyone is wondering. Thanks!
<body id="page-top" data-spy="scroll" data-offset="" data-target=".navbar-fixed-top">
<nav role="navigation" id="nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top">TOP</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="#about">ABOUT</a></li>
<li><a href="#work">WORK</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
Pretty much my problem minus the buttons - my issue applies to anchor links: How to stop buttons from staying depressed with Bootstrap 3
I am using Bootstrap 3 (testing in FF & Chrome), and my .navbar is fixed with a scrollspy function. When I click on a nav link, the link stays in Focused mode (and while scrolling without clicking outside - my nav now shows both links! [1 active/1focus]), and the only way to remove the focus state is to click anywhere outside the nav. Focus state is not a visible issue in Safari.
How would I go about UNfocusing the nav link automatically with mousedown/mouseup instead?
EDIT: Mouseup/mousedown was not the underlying issue as previously thought.
My #nav in case anyone is wondering. Thanks!
<body id="page-top" data-spy="scroll" data-offset="" data-target=".navbar-fixed-top">
<nav role="navigation" id="nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top">TOP</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="#about">ABOUT</a></li>
<li><a href="#work">WORK</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
- Why not use the mouseup event and remove the class that causes the focus from all the navbar elements? – VeldMuijz Commented Mar 5, 2015 at 20:21
- Turns out the focus issue was in the CSS styles and that's why the mouseup events were not working. – Jenn Commented Mar 6, 2015 at 13:36
- Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not"! – user57508 Commented Mar 6, 2015 at 13:56
3 Answers
Reset to default 5Particular detail that resolved my dilemma. Now works in FF and Chrome.
The (scrollspy) active link that needed to be styled
.navbar-inverse .navbar-nav > .active > a:focus {color: #262A3A;}
and removed .navbar .nav > li > a:focus {color: red;} that lingered underneath on mousedown.
jquery solution, since you asked for mousedown/mouseup:
$(".navbar-brand").mouseup(function(){
$(this).blur();
});
https://jsfiddle/re2hLe8r/
If I understood your question correctly you want only to use the .active css class for showing the selected nav. One option would be to override the bootstrap's default color on focused nav's.
.navbar-inverse .navbar-nav>li>a:focus {
color:#777;
outline:none; // to remove possible blue borders
}
http://jsfiddle/sygn/3k7e88p9/