Hello @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 🙂
Hi @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!
Hello @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 🙂
Hello there,
There is a plugin, which helps you to accomplish such that objective. Install and activate the 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.
@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, 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.
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
@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 🙂
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.
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.
@ghassanalqazzaz, I can’t help you further unless you provide me a link or the class of a current menu item.
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”
@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 !
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.
@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 */
}
