remove highlight for clicked item in navbar about personal-jekyll-theme HOT 8 CLOSED

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.

from personal-jekyll-theme.

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.

from personal-jekyll-theme.

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!

from personal-jekyll-theme.

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! 👍

from personal-jekyll-theme.

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;
                }

from personal-jekyll-theme.

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.

from personal-jekyll-theme.

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.

from personal-jekyll-theme.

Awesome. Thanks @PanosSakkos and @joariasl

from personal-jekyll-theme.