If you make a single page site using anchor ids in the menu, the active link color set in the customizer won’t be reflected as in this case all the links are actually the same page, not the different pages, if you want to highlight the menu items in different color when you scroll to some particular section of the page, you can use the following method
- First, you need to add the below code to <head> section of the integration tab
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> (function($){ $(document).ready(function() { $('#top-menu li.current-menu-item').first().addClass('current-item'); $('#top-menu li').removeClass('current-menu-item'); $('#top-menu li a').click(function() { $('#top-menu li').removeClass('current-item'); $(this).parent().addClass('current-item'); }); }); })(jQuery); </script> |
- Then add this to custom CSS section of theme options
|
1 |
#top-menu-nav #top-menu li.current-item a { color: #YourPreferedLinkColorHere !important; } |
This should give you the desired result.
Feel free to comment below for any questions.
Recent Comments