Highlighting current page tab in navigation bar

Let your readers know where they are on your blog. How? By highlighting the tab of the page they are currently viewing. See the demo on my widget showcase blog.

We can detect the current page by using conditional if tag in the navigation bar HTML code. Normally we would have to use one set of conditional if tags for each link/tab.

highlight current page navigation tab1

But if your navigation tabs is made of a LinkList gadget, you can reduce the tags to just one set.  Here’s how:

(Note: If you use a PageList gadget as a navigation bar, you can skip step 2. The gadget already has a built-in current page detection code).

 

1. Finding the navigation bar LinkList code

  1. Find the navigation bar’s widget Id (hint: the Id starts with “LinkList”, followed by a number). If you don’t know how to find the Id, learn how by reading How to find Blogger widget Id. For the sake of this tutorial we will address the Id as YourWidgetId.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates check box on top right of the HTML window.
  5. Look for the navigation bar LinkList code by searching for the widget id you identified in step 1 (Use Ctrl+F). The code should look something like this:
    <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content'>
       <ul>
         <b:loop values='data:links' var='link'>
           <li><a expr:href='data:link.target'><data:link.name/></a></li>
         </b:loop>
       </ul>

2. Modifying the LinkList code

  1. Replace code line 7 with this code:
    <b:if cond='data:blog.url==data:link.target'>
    <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
    <b:else/>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
    </b:if>
  2. The final code will look like this:
    <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content'>
       <ul>
         <b:loop values='data:links' var='link'>
           <b:if cond='data:blog.url==data:link.target'>
           <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
           <b:else/>
           <li><a expr:href='data:link.target'><data:link.name/></a></li>
           </b:if>
         </b:loop>
       </ul>

3. Highlighting the tab

If you are using a Designer Template you probably won’t need this step since the existing code for tab highlighting is applied to all below-the-header tabs regardless if it’s a LinkList or PageList. Go test the tabs first, if they don’t highlight, proceed with the step below.

To style the current page tab, you simply add a styling rule in CSS, like is: 

#YourWidgetId .selected {
background-color: #fff;
border-bottom: none;
/* add more styling declarations here */ 
}

And place it before ]]></b:skin> line in your template code. Replace YourWidgetId with your actual LinkList or PageList widget Id.

  • Sample CSS code (full code)

    This is the CSS code I use to style the navigation bar in the above picture.

    /* LinkList/PageList navigation tabs styling
    ----------------------------------------------- */
    #YourWidgetId {
    margin: 0;
    padding: 0 10px;
    text-align: left;
    height:30px;
    width:640px; /* change to match your header's */
    position: relative;
    background: #336699;
    border-bottom:1px solid #ee4449;
    _border-bottom:none;
    _overflow:hidden;
    }
    #YourWidgetId ul {
    margin: 0;
    padding: 0;
    list-style-type:none;
    }
    #YourWidgetId li {
    display: inline;
    float:none;
    margin: 0;
    padding: 0;
    }
    #YourWidgetId a {
    line-height:31px;
    padding: 6px 6px;
    text-decoration: none;
    font-size:105%;
    color: #eee;
    background-color: #336699;
    border-right: 1px solid #5588bb;
    }
    #YourWidgetId a:hover {
    color: #ddd;
    background: #5588bb;
    }
    *>#YourWidgetId .selected a {
    border-top:1px solid #ee4449;
    border-right:1px solid #ee4449;
    border-left:1px solid #ee4449;
    border-bottom:1px solid #fff;
    padding-top:10px;
    }
    #YourWidgetId .selected a {
    background-color:white;
    color:#333;
    font-weight:normal;
    }

Enjoy!

21 comments to "Highlighting current page tab in navigation bar"

Anup March 3, 2010 at 11:48 PM    

Nice trick! Thanks for the code :)

. August 15, 2010 at 12:16 AM    

Hello,
I tried using this code with a PageList gadget and I couldn't make it work:(

Do I need to change anything else?

Thank you!

Greenlava August 16, 2010 at 7:54 AM    

@.
In step 3, use #YourWidgetId .active instead of #YourWidgetId .selected

. August 17, 2010 at 10:33 PM    

Hi there,

Finally i managed to make it work by adding by adding a new class (i think that is what it is) .
I put it in line 8 of the code in step 2 :


then i made a new #linkbar h4

It probably is not the smoothest solution but at least it works. for now:)

thank you for your help! It is good to have some backup:)

Greenlava August 17, 2010 at 11:30 PM    

@.
Glad to know you've made it work :)

Snowball February 3, 2011 at 4:04 PM    

Excellent tip, you have been really helpfull, thanks a lot!!!

jkateb July 12, 2011 at 6:56 AM    

Brand new blogger here. Not sure if this post would solve my problem - - trying to make my page link in the right side bar change color to denote the current page, NOT bold the current page (as it does currently). Would there be additional steps above to the process above to make this happen? Here's my (very sparse!) blog: http://thisnorthwoodsnest.blogspot.com/

Greenlava July 12, 2011 at 6:11 PM    

@jkateb
Go to Design > Template Designer > Advanced > Add CSS and add this code:

.PageList li.selected a {
font-weight: normal;
color: PUT COLOR CODE HERE;
}

jkateb July 13, 2011 at 11:36 PM    

@Greenlava
Love it - - exactly what I wanted! Your posts/replies in various forums have helped me so much to get my blog exactly how I want it. Thanks for sharing all your knowledge!

Scott August 3, 2011 at 7:03 AM    

I'm having some trouble with this. I can't get my selected link to highlight for the life of me. Does this trick still work?

Greenlava August 7, 2011 at 8:42 PM    

@Scott
Yes it still works.

gtag19 September 11, 2011 at 9:01 PM    

hey there
I have a PageList and I cannot make it work. I also tried .active instead of .selected. Any more ideas?

Greenlava September 15, 2011 at 12:07 AM    

@Γιωργος Ταγαρης
I don't find any PageList gadget on your blogs.

Will,  May 9, 2012 at 6:18 AM    

Sigh, I can't get it to work. Can someone look at this blog for me? http://wpspuawai17.blogspot.co.nz/search/label/Maths%20Games

Search for LinkList1 and you'll see I've added the CSS and edited the step2 code.

Any ideas? I appreciate your help.

Cheers,

Will

Greenlava May 14, 2012 at 8:17 PM    

@Will
I see the CSS part but not the HTML. There's no "selected" class generated on the live page.
Please post your LinkList code here.

Will,  May 15, 2012 at 4:14 AM    

Hi Greenlava

Sorry, I didn't notice the code changed in the live view of the blog.

My LinkList code looks the same as your example. See below...

<b:widget id='LinkList1' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:blog.url==data:link.target'>
<li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
<b:else/>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
</b:loop>
</ul>

If it helps, I've copied the full template code and put it in a text file here... http://www.wanaka.school.nz/blogger-template.txt

Many thanks for your help!!

Will

Greenlava May 16, 2012 at 5:51 PM    

@Will
It seems this hack no longer works. The code saves but Blogger disregards it.
Fortunately right now you can use Pages gadget to achieve similar goal. (At the time I wrote this tutorial in 2010, Blogger didn't allow non-page links in Pages gadget. Now they do). I suggest you transfer the links to a Pages gadget. The 'selected' class will be added automatically to current page by default.

Will,  May 22, 2012 at 10:54 AM    

I don't think it as simple as using the Pages gadget. The Pages gadget highlights the current page if it's a static page. But if it's a link page, it doesn't highlight the current page. Being able to link in the Pages gadget is a new feature so I suppose we'll have to wait for the templates to catch up.

Thanks for you help.

mardyyn,  November 14, 2012 at 1:40 AM    

@Will @Greenlava
I got exactly the same problem. if I use the Pages-Gadget and add Weblinks to it, these tabs are not highlighted when active.

any solutions?

THX 4 help!

Distilady November 26, 2012 at 12:24 PM    

wow, it worked like a charm, only that I had to write it this way in order to make it work #YourWidgetId .selected a {color:#cc6600;} I had to add an "a" THANKS!

Anonymous,  December 7, 2012 at 1:01 PM    

Tq u so much! U made my day!!!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.