Plugin Author
malihu
(@malihu)
Hello,
The links highlighting you see comes from your theme’s stylesheet, not the plugin (see related FAQ for more info).
Because each theme has its own way of styling menu links, it’s difficult to find an exact solution from a previous post that you can just copy/paste without modifying it.
You need to reset your theme’s link highlighting while maintain the highlighting from “Page scroll to id”. To do this with as little CSS rules as possible, insert the following in your CSS (e.g. custom/additional CSS):
.hb-s3i2 .site-navigator > .current-menu-item > .menu-item-link._mPS2id-h,
.header .sticky-row-scroll .hb-s3i2 .site-navigator > .current-menu-item > .menu-item-link._mPS2id-h:not(.mPS2id-highlight){
color: #000;
}
.hb-s3i2 .site-navigator > .current-menu-item > .menu-item-link._mPS2id-h:not(.mPS2id-highlight):after{
width: 0;
}
.hb-s3i2 .site-navigator > .current-menu-item > .menu-item-link._mPS2id-h:not(.mPS2id-highlight):hover:after{
width: -webkit-calc(100% - 30px); width: calc(100% - 30px);
}
Hope this helps
Hi there
thanks so much for your speedy reply and the customized CSS.
I have added it to my custom CSS and now there is only the Home link highlighted when the page is loaded! But when I scroll to the first submenu both menu links are hightlighted and the highlighting disappears as fast as I scroll into the section. This also happpens when I load other pages which have the shortcode of the plugin inserted. Any idea how to fix this?
Thanks so much !
Plugin Author
malihu
(@malihu)
Firstly, you have enabled few plugin option that you don’t need. Try disabling (uncheck) both “Allow only one highlighted element at a time” and “Keep the current element highlighted until the next one comes into view”.
Can you explain how exactly you want your links to appear? Which links you want to highlight? All, none, just “Home”?
Hi there
thanks again for your reply.
I have disabled both options.
I would like that it highlights Home when the page is loaded and when it scrolls to About or other Options that it is highlighted when it is at that section, home then non highlighted! Thank you ! 🙂
Plugin Author
malihu
(@malihu)
I just check your page again and it seems that your navigation menu now, is not sticky. Do you still want to highlight the links? I’m asking cause the way the menu currently works (toggled on/off, non-sticky etc.) highlighting will be invisible to the user.
Hi there , I just check it and it was set to be sticky for desktop also made it sticky now for mobile users!
I would still like to highlight the links as described above. Thanks a lot for your support !
Plugin Author
malihu
(@malihu)
Add the following to your CSS:
.hb-s1i2 .site-navigator>.current-menu-item>.item-link-outer .menu-item-link._mPS2id-h:not(.mPS2id-highlight){
color: #000;
}
If you want “Home” to work like the “About” link (and handled by the plugin), you should make it a custom link (like “About”) with a URL like http://www.wooltopia.com.au/#home. Then create a new target with id home and insert it somewhere at the top of your page.
Please note that you have some PHP warnings on your page that are displayed (since wp debug is set to true). This means that link highlighting will not work 100% correctly as these printed warnings break document flow.
