Title: Highlighting menu items on scroll Last modified: November 28, 2016 --- # Highlighting menu items on scroll * [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/) * Hello forum, * as the title says, I would like to highlight the menu items while the user scrolls in order to show the user in which section they are currently. I am aware of the fact that this requires a jquery function on scroll, the issue is I would like more insight on how to target the elements in question. * Any help is appreciated. * Thanks in advance Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/page/2/?output_format=md) [→](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/page/2/?output_format=md) * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8490078) * Hello [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * No need at all for jQuery, this can be done in CSS. A link to your site would be great so we can help you. * SYA 🙂 * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8491968) * Hi [@lebcit](https://wordpress.org/support/users/lebcit/) thank you for your swift reply, unfortunately my site is being developed on a localhost environment for testing purposes. Is it still possible to provide me with assistance ? * Thank you! * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8492917) * Hello [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/), * To target a current menu item in WP you need to target this class `.current-menu- item` * So if you want to change the background color of the current menu item * ``` .current-menu-item { background-color: red; /* you can replace red by any color or any HEX value like #fff or #d65050 */ } ``` * If you want to change the color of the link’s text * ``` .current-menu-item a { background-color: red; /* you can replace red by any color or any HEX value like #fff or #d65050 */ } ``` * SYA 🙂 * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8493485) * Hello there, * There is a plugin, which helps you to accomplish such that objective. Install and activate the [Page scroll to id](https://wordpress.org/plugins/page-scroll-to-id/) plugin. Then go to Settings > Page scroll to id. Tick the option that says “Enable on WordPress Menu links” and keep other options remain default. * Now you can style the current active one page menu item. Add the following custom CSS code into your child theme’s style.css. * ``` .mPS2id-highlight{ background-color: red; } ``` * I hope this reply helps. * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8496908) * [@lebcit](https://wordpress.org/support/users/lebcit/) thank you for reply, in my case that and after targeting that element, all the menu items were highlighted and not the current one on scrolling. Any ideas why this is the case ? Could it be that menu items are not being assigned the .active attribute ? * [@kharisblank](https://wordpress.org/support/users/kharisblank/), thank you for your suggestion, that does work actually but the visuals are a bit sub-par in terms of appearance. What I had in mind was highlighting the entire menu item and not just the link text, and for some reason the first menu item is highlighted during the brief transition between page sections, which ends up highlighting 2 items at a time for a short duration of time which does not really look nice. * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497006) * Is there possibly any styling in the default sydney css style sheet that defines what should happen to the navigation menu items when set to active ? * can this be of any relevance? +++++++++++++++++++++++++++++++++++++++++ * .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav >. active > a:focus { -webkit-appearance: none; text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } +++++++ ++++++++++++++++++++++++++++++++++++ * regards * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497298) * [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/), I’ve tested on local the following on Sydney Theme * ``` .current-menu-item { background-color: red; /* you can replace red by any color or any HEX value like #fff or #d65050 */ } #mainnav ul .current-menu-item a { color: yellow; /* you can replace yellow by any color or any HEX value like #fff or #d65050 */ } ``` * It’s working perfectly ! Did you make some changes to the theme ?! * SYA 🙂 * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497335) * I have a sydney child theme, I have done a lot of changes to the theme yes. * When I apply the CSS rules you provided, all of the menu items are highlighted in red and they remain so with and without scrolling.. Any ideas? * Each menu item has a link as follows: /localhost/wordpress/#pg-2-0 and so on. * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497356) * it seems like the class “.current-menu-item” is not specific enough to address the menu elements separately. I thought that one approach would be adding .active class to the links respectively. * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497846) * [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/), I can’t help you further unless you provide me a link or the class of a current menu item. * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8497880) * Well, one of the menu items has the class as follows: * class= “menu-item menu-item-type-custom menu-item-object-custom current-menu- item current_page_item menu-item-home menu-item-170” * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8498146) * [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) if `. current-menu-item` is not working, this means that you should look at the right side of the inspect element tool, under CSS rules and grab the specific id/class that is manipulating your current menu item ! * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8498170) * That is * #mainnav ul li a * I apologise if you are running out of patience for I am but a student. * Thank you for your time and replies. * Thread Starter [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * (@ghassanalqazzaz) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8498194) * Sorry that was a type. * it is * #mainnav ul li * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/#post-8498213) * [@ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/), If the following does not work, than you have made a nasty CSS change(s) to your theme and I can’t help you. I suspect that you messed around your theme with jQuery… Try this : * ``` #mainnav ul .current-menu-item { background-color: red; /* you can replace red by any color or any HEX value like #fff or #d65050 */ } #mainnav ul .current-menu-item a { color: yellow; /* you can replace yellow by any color or any HEX value like #fff or #d65050 */ } ``` * OR * ``` #mainnav ul li.current-menu-item { background-color: red; /* you can replace red by any color or any HEX value like #fff or #d65050 */ } #mainnav ul li.current-menu-item a { color: yellow; /* you can replace yellow by any color or any HEX value like #fff or #d65050 */ } ``` Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/page/2/?output_format=md) [→](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/page/2/?output_format=md) The topic ‘Highlighting menu items on scroll’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/sydney/2.67/screenshot.png) * Sydney * [Support Threads](https://wordpress.org/support/theme/sydney/) * [Active Topics](https://wordpress.org/support/theme/sydney/active/) * [Unresolved Topics](https://wordpress.org/support/theme/sydney/unresolved/) * [Reviews](https://wordpress.org/support/theme/sydney/reviews/) * 17 replies * 3 participants * Last reply from: [ghassanalqazzaz](https://wordpress.org/support/users/ghassanalqazzaz/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/highlighting-menu-items-on-scroll/page/2/#post-8501463) * Status: not resolved