Current Navigation Links

mukhtar

New Member
Hi, Does anyone know how to make the buttons in the navigation bar so that it is highlighted when that is the active page?
 

Basti

Administrator
Staff member
Use a mix of jquery and css

1) Just some basic now, for the ease of things, we give this new highlight the same style as when you hover over a menu item
open user.css and add the following
Code:
#navigation li a.highlight {
    color: #2b567f;
    background: #ddd url(img/bg9.png) bottom left repeat-x;
    background: #fff url(img/bg8.png)  top left repeat-x;
    border: 0px solid #fff;
    text-shadow: 1px 1px 2px #fff;
}
2) Now copy wrapper.html into the folder "child" of parabola
3) Open this newly copied file
4) Below
Code:
    $(function() {
Add
Code:
        var top_nav_link = window.location.href;
        $("#navigation li a").each(function() {
            if(this.href == top_nav_link) {
                $(this).parent().siblings().children().removeClass('highlight');
                $(this).addClass('highlight');
            }
        });
Tested and working :)
 

mukhtar

New Member
Many Thanks Basti. Really appreciated.

However now it adds a trailing // at the end of url in the address bar. Is that an issue?
 

Basti

Administrator
Staff member
not the fault of this tweak, check that in admin settings you list url does not end with trailing slash ( / ), thats important.
Then click go to the menu manager and update the links if needed
 

Basti

Administrator
Staff member
not tested but should work, make current link bold
Code:
        var ucp_nav_link = window.location.href;
        $("#user_cp_main_menu li a").each(function() {
            if(this.href == ucp_nav_link) {
                $(this).parent().siblings().children().removeClass('ucp_highlight');
                $(this).addClass('ucp_highlight');
            }
        });
Code:
# user_cp_main_menu  li a.ucp_highlight {
    font-weight: bold;
}
 
Top