@freshmarketing
For the current “home” link showing the active state, the best solution to that would be to change the setting in the “Appearance > Theme Options > Fonts” for your main menu “active” color to be the same as the menu color. If you set the color this way it will ensure that a link to the current page isn’t getting a different color.
We don’t use a link to the current page as the “home” link in the demo, instead we apply a scroll to top function by making a link with the URL “#ScrollTop” which will apply a special function to go to the top of the page. That’s a pretty normal thing for a one-page design to do.
Right now the theme doesn’t apply any custom colors or scroll state markings to the menu items as the page scrolls. This is something that will require custom JavaScript to achieve and it’s on our list of future updates. Right now you might be able to add this yourself to the theme if it’s a requirement for your project. There are a lot of resources and tutorials out there with example JavaScript functions that achieve this result.
When I searched the topic (https://www.google.com/search?q=highlight+link+on+scroll) I found a few resources that can probably be adapted easily for a WordPress menu:
http://stackoverflow.com/questions/2896869/jquery-changing-css-on-navigation-when-div-scrolls-into-view/2898109#2898109
This is adapted from the code on that page to apply to the WP menu structure, but it gets the process started. You can add this into the Custom JavaScript area of the Theme Options
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
contentTop = [];
jQuery(document).ready(function($){
// Set up content an array of locations
$('#MainNav li.menu-item.ss-nav-menu-item-depth-0').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
});
// adjust side menu
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('#MainNav li.menu-item.ss-nav-menu-item-depth-0')
.removeClass('selected')
.eq(i).addClass('selected');
}
});
});
});
With that code included it will apply the class “selected” to each of the menu <li> items. That will give you the ability to set your own custom styling for the selected state of the element, maybe by entering something like this into the Custom CSS area:
#MainNav li.menu-item.ss-nav-menu-item-depth-0.selected { color: #d00 !important; }
We will likely add something like this into the theme in the future to make it a default feature. We developed the theme not as a one-page theme first, but a fully functional theme that’s capable of one-page designs. The updates and additions of small enhancements like this will be a continuous thing intended to expand on all the different ways the theme can be used.
