Is there a way inside my Quick Launch links to identify the link which have the same name as the current site Title, and change its color

Question

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:-

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 ?

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">

$(document).ready(function(){
    $(".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"});
});

</script>

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