Prior to my arrival it was decided that all navigation would be hard coded into the Master Page. I wish I could find a solid reason why, but for the time being it escapes me. Due to time constraints, rewriting the Master Page is not really an option.

The issue I am having is when navigating to other sites(Home, News, About), the active site is not reflected in the navigation.

Here is the code I'm working with:

<div class="top_nav">
    <ul class="list-nav">
        <li class="first"></li>
        <li class="sep-left"></li>
        <li class="selected"><a href="/" target="_self" title="the Nest">
        <li class="sep-right"></li>
        <li><a href="/news" target="_self" title="News">
        <li class="sep"></li>
        <li><a href="/about" target="_self" title="About us">
            <span>About us</span></a></li><li class="sep"></li>

<div id="s4-searcharea" class="s4-search s4-rp topBar"><!-- Search -->
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
            <SharePoint:DelegateControl runat="server"     ControlId="SmallSearchInputBox" Version="4"/>

Here is the CSS

/* Top navigation */
div.top_nav{background:transparent url('/Style Library/Images/npe_layout.png') no-     repeat;display:block;height:30px;margin-bottom:10px;width:955px}
.top_nav * {color:#fff}
.top_nav .list-nav{float:left;text-align:center}
    .top_nav .list-nav li{display:inline;float:left;height:24px;list-style-  type:none;padding:0}
    .top_nav .list-nav li.first{margin-left:2px}
        .top_nav .list-nav li a{display:block;height:25px;outline:0;padding:5px 10px 0 10px;text-decoration:none}
            .top_nav .list-nav li a:hover{background:transparent url('/Style Library/Images/npe_layout.png') repeat-x scroll -1011px -186px;height:25px;text-decoration:none!important}
            .top_nav .list-nav li a span{cursor:pointer;display:block;margin:0;padding-top:2px}
    .top_nav .list-nav li.selected {margin-top:4px} 
        .top_nav .list-nav li.selected a{background- color:#fff;color:#8e663c;padding:1px 6px 0}
            .top_nav .list-nav li.selected a:hover{background:#fff none}
            .top_nav .list-nav li.selected a span {color:#369}
    .top_nav .list-nav li.sep {background:transparent url('/Style  Library/Images/npe_layout.png') no-repeat -965px 0;height:25px;margin-top:3px;width:2px}
    .top_nav .list-nav li.sep-left {background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -955px 0;height:27px;margin-top:4px;margin-left:2px;width:5px}
    .top_nav .list-nav li.sep-right { background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -960px 0;height:27px;margin-top:4px;margin-right:2px;width:5px}

a bit of javascript to help things along

<script type="text/javascript">
//Sets the selected tab on the Nest global navigation.
function setGlobalNavigationSelected() {

try {

    $(".layout .top_nav ul a").each(function () {
        var href = $(this).attr('href');
        if (href != undefined && href != "") {
            if (href == window.location.href) {

                var previouslyselected = $(".layout .top_nav ul .selected");


                $(this).parent().before('<li class="sep-left" />');
                $(this).parent().after('<li class="sep-right" />');

                var nestNextLi = $(this).parent('li').next();
                if (nestNextLi != null && nestNextLi.length > 0) {
                    nestNextLi.children('a:first-child').children('span').children('span').css('background-image', 'none');


catch (err5) { }





2 Answers 2


Including the navigation in this way effectively bypasses the SharePoint mechanisms for highlighting the current tab so you will have to roll your own.

One approach would be to use jQuery to iterate through the urls in the nav (perhaps ".top_nav li a") and compare the url in the each link to the current window.location.href to find the best match. Once found use .parent().addClass("selected") to highlight the parent LI.

  • i found a bit of javascript with all of the files i was given (added to description above). i have added it to a javascript file, and then referenced it in my masterpage. on page load, i would expect it to fire, but nothing is happening. am i missing something in the script?
    – Jason
    Jun 7, 2012 at 21:02
  • This is a function. You need to call that function from outside the curly braces {} i.e. setGlobalNavigationSelected(); However, this script is nothing like I was thinking of as it seems to require an exact match which would only work on the landing page for each tab. You need logic to find the best match, which would allow for the proper tab to be highlighted regardless of the depth into the site.
    – Dave Wise
    Jun 7, 2012 at 21:17

A different perspective on this... I would argue that you need to use the out of the box navigation control. It has many benefits such as security trimming items according to the current user's privileges. you will spend more time fixing bugs with your custom Nav than just putting the original back in. At the end of the day, you still have to write the jquery to do the selection and test it, it would take the same amount of time putting in the original Nav. Also let me assure you that you design can completely be implemented using the out of the box navigation.

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.