Search code examples
javascriptjquerycsstwitter-bootstrap-3onfocus

Disable Focus behavior on nav links?

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>
Solution

  • Particular 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.