- This topic has 8 replies, 2 voices, and was last updated 7 years, 11 months ago by
.
When you click on one of the “page anchors” buttons on surgeea.com, they don’t get highlighted. Is there any way to fix this or perhaps try a different way of making these links to page sections that might be less problematic?
Solution for this topic
Hi Surge,
Thank you for your question.
You can achieve this by using the attached small plugin specially developed for you that contains some custom code.
Also use the following custom CSS code.
#page-container .sh-header #header-navigation .sh-nav > li.menu-item > a.active { color: #f3bc47!important; }Best regards,
Shufflehound teamThank you very much guys, that did get us pretty far in resolving this. Unfortunately problems still persist.
- When i click on one of the buttons leading to a page anchor, Home button remains highlighted as shown in the attached Screenshot1.
- When i go to one of the separate pages the highlight color is white instead of orange, making it invisible in front of a white background.
Here’s all the code we added since the beginning of trying to fix this. Please let me know if, perhaps, something here needs to be adjusted:
#page-container .sh-header.sh-sticky-header-active .sh-nav > .menu-item-type-custom.current_page_item > a {
color: rgba(61,61,61,0.69) !important;
}
#page-container .sh-header-mobile a,
#page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.current_page_item > a,
#page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li:not(.current_page_item):hover > a {
color: rgba(255,255,255,0.85)!important;
}
#page-container .sh-header-mobile a:hover,
#page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a,
#page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a > i,
#page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.sh-nav-social > a:hover > i,
#page-container .sh-header-mobile-navigation li > a:hover > i,
#page-container .sh-header-left-side li.menu-item > a:hover {
color: #fff!important;;
}Thanks a million,
Surge
P.S.
If it might be easier for you to figure this out by having access to my site, i’m more than happy to give you my wordpress login details through a private message. Just let me know if this would be better and how do i go about delivering this to you outside the public forum.
Solution for this topic
Try changing the code as following.
#page-container .sh-header.sh-sticky-header-active .sh-nav > .menu-item-type-custom.current_page_item > a { color: rgba(61,61,61,0.69) !important; } body.home #page-container .sh-header-mobile a, body.home #page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.current_page_item > a, body.home #page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li:not(.current_page_item):hover > a { color: rgba(255,255,255,0.85)!important; } body.home #page-container .sh-header-mobile a:hover, body.home #page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a, body.home #page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a > i, body.home #page-container .sh-header:not(.sh-sticky-header-active) .sh-nav > li.sh-nav-social > a:hover > i, body.home #page-container .sh-header-mobile-navigation li > a:hover > i, body.home #page-container .sh-header-left-side li.menu-item > a:hover { color: #fff!important;; }If the issue still occurs then please share me your site log in details privately by adding them in the box having text “Click here to share private content. Only you and forum moderators will bee able see it.”
Hi guys,
It worked for the separate pages menus but the main page buttons pertaining to page anchors didn’t highlight. So i pasted again the last piece of the previous code you sent:
#page-container .sh-header #header-navigation .sh-nav > li.menu-item > a.active {
color: #f3bc47!important;
}That helped with highlighting on the main page, but it was still highlighting the anchored location along with the Home button. I fixed that by removing the standard Home button and inserting a new anchor above the revolution slider and making that the Home page button instead.
Now all appears to be working! Thanks you so much guys for your relentless patience and perseverance in resolving this.
Just noticed one small problem… When i go to one of the separate pages such as FAQ and i click on the button pertaining to an anchor link, such as “Free Trial”, button doesn’t get highlighted once it opens that section…
I have already sent you my login details in the other post:
https://support.shufflehound.com/forums/topic/revolution-slider-button-problem/#post-3464
Please see if something can be done about this while you’re there. Much thanks.
Surge
Forgot to mention…
As i scroll through the main page, the buttons related to different anchors don’t highlight as i scroll.
Actually what you are trying to achieve here need to develop custom code which is beyond the scope of theme support. See here https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
