Current Navigation Links

[mukhtar]

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]

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

#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

    $(function() {

Add

        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

 

[Mark]

nice one!

 

[mukhtar]

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]

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

 

[mukhtar]

Thanks a lot. You truly are a genius.

 

[mukhtar]

Is it possible also for the User control panel sub menus after login ?

 

[Basti]

not tested but should work, make current link bold

        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');
            }
        });

# user_cp_main_menu  li a.ucp_highlight {
    font-weight: bold;
}