remove highlight for clicked item in navbar

[veswill3]

Cool theme. While I was browsing around the live demo I noticed that the navbar will highlight an option when it should not.
To reproduce, click on one of the options to scroll to that section, and then manually scroll back up some. Instead of the currently visible section being the only highlighted option, both stay highlighted.

[le4ker]

If I'm not wrong, this is the original's grayscale behavior:

http://ironsummitmedia.github.io/startbootstrap-grayscale/

When you scroll through the sections, the navbar highlights the section you are currently viewing.

[veswill3]

It does that as expected but you can end up in a situation where 2 are highlighted at the same time by clicking on one and then scrolling to a different one. The only you clicked will stay lighter and the one you scroll to will activate and highlight as well. If you just grabbed this from somewhere else it may not be your mistake.

[le4ker]

Yes, the repo that I forked was a mashup of grayscale and agency theme's.

I see what you mean now, I think grayscale theme has a fix for this. I will give it a try to integrate it :)

Thanks!

[le4ker]

I was able to repro it on http://panossakkos.github.io/personal-jekyll-theme/ and not in http://ironsummitmedia.github.io/startbootstrap-grayscale.

I will have a look at the grayscale css and fix it. Thanks for reporting it! 👍

[joariasl]

This occur because in the line grayscale.scss:115 the background highlight including to :focus pseudo-class. It is when the object is selected, if you unselect this item this remove the background.
An possible solution is replace this sentence for:

                &:hover,
                &.active {
                    outline: none;
                    background-color: rgba($light, 0.3);
                }
                &:focus {
                    outline: none;
                    background-color: inherit;
                }

[joariasl]

Other option (Perhaps the best, since it is due to this behavior) is add the line:

$anchor.blur();

in the file grayscale.js after to line 19.

[joariasl]

In grayscale theme have removed the :focus style. The problem is that this method not indicate the selected item with tab navigation, because :focus selection not have style.
I applied a fix using javascript for focus out after the transition scrolling is ended.

[veswill3]

Awesome. Thanks @PanosSakkos and @joariasl