I am working on sharepoint server 2013 on-premises. and inside my team site collection, i have around 30 sub-sites,and all the sub-sites share the same Quick launch navigation structure as follow:-

enter image description here

now in the above picture the current sub-site name is "test new project er". so i am trying to find a way using .css or javascript/jQuery to select the link which have the same name as the current sub-site title, and change its color to blue and set it as bold. so can anyone adivce on this please? i can not find such a setting inside the Quick launch or navigation modules. Thanks

i tried this css rule.:-

#zz15_RootAspMenu li:nth-child(2) span:nth-child(1) {
    color : yellow;
    font-weight : bold;

but all the links under the first link was colored yellow. although inside the css selector i am saying to select the second li and then select the first span . can anyone adivce on this please ?

1 Answer 1


You need to use the _spPageContextInfo.webTitle to get the title of the subsite. After that, you need to match it to the span tag which contains the title.

For that, you can use the below code. Ensure that jQuery is available for that:

<script type="text/javascript">

    $(".menu-item-text:contains('"+ _spPageContextInfo.webTitle +"')").css({"color":"blue","font-weight":"bold"});
    // if you have the hex code, you can use it as 
    //$(".menu-item-text:contains('"+ _spPageContextInfo.webTitle +"')").css({"color":"#ffff00","font-weight":"bold"});


Add this in your master page or the page layout as per your requirements. Check below screenshot, its working at my end.

enter image description here

  • @johnG - did you check this code ? I have assumed that the 2nd link is the title of the current site. Commented Jul 13, 2017 at 12:21

Your Answer

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

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