I'm currently using the SharePoint Web Control spnavigationmanager to create a navigation for sites that are easily configurable by going to Site Settings > Navigation and making changes there.

I'm trying to class the link in the second dropdown section for the current page I am on. See image.

Current SharePoint Nav

As you can see I am on the overview page in SharePoint. Full URL is http://server-info/ourcompany/brandadverts/brandresctr/Pages/Overview.aspx.

SharePoint URL added to navigation page is /ourcompany/brandadverts/brandresctr/Pages/Overview.aspx

I would like the Overview Link in the fly-out navigation to be the same style as the About Our Brand Link.

Like the below. Intended look and style

Code output in developer looks like the below. Designer Dom Explorer

2 Answers 2


Try below style

.ms-quicklaunch-navmgr > ul.root > li > ul.dynamic > li.dynamic > a:hover {  
  background-color: red;
  • Thanks but that's on hover. I need it highlighted even when it's not highlighted. I need JQuery to evaluate the links and find one that is the current page and then tag a class the anchor for the link. I already have a hover state. Jul 6, 2016 at 19:13

If you're just looking to use some jQuery to find the anchor tag in your nav menu whose href is the same as the current url you could do something like this:

var currentRelUrl = window.location.pathname;    
var navNode = $(".s4-ql .menu-vertical a[href$='" + currentRelUrl + "']").addClass("highlight");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.