This seems to be a Safari specific issue as I've successfully tested Chome and Firefox.
I've installed and configured the Scroll to ID plugin on the site and I can get it to work for same page links (buttons at the top of the page to content sections below), but when implementing it in the menu as a custom link (requiring a page load), it does not perform as expected.
In the primary menu, click About>Our Team. The browser strips the URL of the # and anything after it; therefore, it only ever lands at the top of the page. Any insight? Thanks.
Great! That does make it function. However, I set an offset in the plugin settings, but between page loads (for example, from the Home page to About>Horses), it disregards it. It does work perfectly if I'm linking within the page (for example, from About>History to About>Horses). Any ideas as to how I can resolve this?
Also, I know that the plugin comes with a menu highlight selector class, but I'm not sure how to implement it. When I'm on my Programs page for example, 9 of the program sub menu items are highlighted rather than just the one in the viewport. Do you know how to set up that css properly?
Add this into your custom css box to correct the highlighting:
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h mPS2id-clicked {
background-color: #726354!important;
}
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h {
background-color: #4e423b!important;
}
Hey Adam, the css snippet I pasted a week ago was supposed to sort it - if you would like me to help more, please allow me to log in so I can play with the css without us having to go back and forth :)
I just logged in and corrected the css for the scroll to highlighting and the footer widget. For others interested the fix is:
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h.mPS2id-clicked,
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h:hover
{
background-color: #726354!important;
}
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h
{
background-color: #4e423b!important;
}
^ you just need to change the background colors to match your own nav :)
Hey Adam!
I believe it's because you're entering
instead of
into your custom links.
Cheers :)
Great! That does make it function. However, I set an offset in the plugin settings, but between page loads (for example, from the Home page to About>Horses), it disregards it. It does work perfectly if I'm linking within the page (for example, from About>History to About>Horses). Any ideas as to how I can resolve this?
Also, I know that the plugin comes with a menu highlight selector class, but I'm not sure how to implement it. When I'm on my Programs page for example, 9 of the program sub menu items are highlighted rather than just the one in the viewport. Do you know how to set up that css properly?
Add this into your custom css box to correct the highlighting:
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h mPS2id-clicked { background-color: #726354!important; } html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h { background-color: #4e423b!important; }Cheers!
I actually have the same problem, it only happens when I am linking from a different page, could you find a solution?
Cheers.
No, I haven't yet. Still hoping for some more assistance to resolve.
Hey Adam, the css snippet I pasted a week ago was supposed to sort it - if you would like me to help more, please allow me to log in so I can play with the css without us having to go back and forth :)
Cheers
FYI: The site is now live and can be found at agaperiding.org. Thanks for your continued support.
Hey Adam!
I just logged in and corrected the css for the scroll to highlighting and the footer widget. For others interested the fix is:
html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h.mPS2id-clicked, html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h:hover { background-color: #726354!important; } html body header#top nav .sf-menu ul li.current-menu-item a._mPS2id-h { background-color: #4e423b!important; }^ you just need to change the background colors to match your own nav :)
Cheers
Thanks