Customising 2017 theme according to the blog

I have a question about some code in a wpmu blog post:
https://premium.wpmudev.org/blog/twenty-seventeen-wordpress-theme

There is a section in that post called Extra Credit: Create Dynamic On Page Navigation
It allows you to have links in the menu which go to the sections on the 2017 theme frontpage. It works fine BUT all of the links to the sections display as active in the menu (a different color). It is confusing.

It makes sense that it happens with the code but it is weird for a user. If you see this page it looks like blog must be active as it is the only different colored link. It is not active, Home is.

Ideally the section link would highlight when that one was selected. But it would also be ok if Home stayed active and the section links never changed color. Any quick workaround?

Please check the site to see the issue: https://fincamalinche.com/

    Predrag Dubajic

    Hi mark_gason,

    Hope you're doing well today

    Ah, true, I tested this on my end and it does indeed cause this behaviour for menu items.

    Having all the menu items inactive is pretty simple and we can do that with simple CSS, however making them highlight when clicked for section isn't much complicated as well so let me go for the second solution

    First thing we need is to add some CSS to return the color to the previous one and the active color that we will use, so what you need to do is apply this CSS code:

    .home .navigation-top .current-menu-item > a,
    .home .navigation-top .current_page_item > a {
    	color: #222 ;
    }
    
    .home .navigation-top .current-menu-item > a.active-anchor,
    .home .navigation-top .current_page_item > a.active-anchor {
    	color: #767676 ;
    }

    What we need to do now is add a script that will add new class to anchor elements and with that it will be able to use above CSS code.
    So go ahead and add this JS code:

    $(".menu-item a").click(function() {
    	// remove classes from all
    	$(".menu-item a").removeClass("active-anchor");
    	// add class to the one we clicked
    	$(this).addClass("active-anchor");
    });

    And that should be it, default color should be now restored to old one and on click it will switch to grey.

    Let us know if that's what you wanted to do

    Best regards,
    Predrag

    mark_gason

    Hi,
    I implemented that, awesome thank you. One small issue. When you go to the site initially or after you click the 'Home' link it does not highlight as current.
    Editing this. I found a second issue. If you go to another page, in this case the only other page is 'Blog', then click a link it takes you to the home page and section but the menu item is not orange. They only go orange of you click a section menu item while on the homepage.

    Predrag Dubajic

    Hi mark_gason,

    The code I provided above works on click, so active class is added when you click on menu item and get's the styling based on that.
    When you navigate from other page this will not work as it reloads the page and you would need to click on the menu item again to highlight it.

    Having Home menu item active on load is pretty easy fix and this JS should do the trick:
    $('.menu-item-10 a').addClass('active-anchor');

    As for other menu items, this would require some more custom coding as it needs to be highlighted when active section is on screen, something like this might help with that:
    https://stackoverflow.com/a/9980042

    Best regards,
    Predrag