{kun´ēzē}
1 1 1 1 1
25Apr2016

Transform the Kunena Blue Eagle menu from “tabs” to “nav pills”

Information
1901 hits Updated: 25 April 2016

The Kunena Blue Eagle menu

The “nav pill” menu

There must be literally thousands of different ways that site owners handle user navigation around their websites; people probably spend countless hours (and sometimes a lot of money) searching for that “ideal” menu that highlights and facilitates access to the site’s content.  There are an unlimited number of menu modules one can obtain for Joomla; some menus are included when you obtain a Joomla template and others can be installed separately.  The choice is limited only by one's imagination.

The whole point of having a menu is to make it easy for people to find what they’re seeking or to display what area of the site that they’ve found.  Whatever menu system you choose, it’s probably a good idea to keep it simple!

This article demonstrates how, with a few lines of CSS, you can transform the “standard” menu in the Blue Eagle template for Kunena from its “tabbed” appearance into a Bootstrap-like “nav pills” design without installing a Bootstrap-compatible Joomla template or an additional Joomla menu module.

The Kunena Blue Eagle menu

Kunena menu barFrom K 3.0, the Kunena menu (click the image on the right of this page to enlarge) is automatically displayed when you install Kunena.  The menu can be disabled (or enabled) with the setting:

Kunena Forum » Template Manager » Blue Eagle » Display Kunena Menu

Even though this menu is basically “just another Joomla menu”, some people prefer something a little different.  Some people go to a lot of trouble to relocate the Kunena menu items and place them inside their main site menu (and, if that’s for you, then that’s OK) but, essentially, this menu is specifically intended for your forum.

The Kunena Template Manager allows people to colour the menu items differently.  There are individual settings for colouring the Inactive Tab, Active Tab, Hover Tab, Menu Border, Inactive Tab Font and  Active Tab Font.  Although these settings allow people to customise the menu to blend more aesthetically with their Joomla template, the fact remains that the menu design displays the menu items as a series of “tabs” and some people have a dislike for tabbed-menu items.

The “nav pill” menu

Even before Bootstrap templates, the default Joomla Protostar template included a simple, “button-like” menu that has some nice transition effects; the Protostar template is not “natively”  Bootstrap-ready.  It would be “nice” if Kunena had these Bootstrap classes included but, unless people wanted to go to the effort of rewriting chunks of PHP source code, it’s not that simple to leverage the Bootstrap CSS classes—included with today’s Joomla templates (most of which are based on Bootstrap in one form or another)—into Kunena.  The point is that none of the standard templates developed by the Kunena team have native Bootstrap support as far as the forum menu is concerned.

k40 BE makover3Using the Joomla Protostar menu design as the basis, we will demonstrate how to change the Kunena menu tabs into buttons (click the image at right of screen to enlarge it).  A word of advice:  in the CSS code below, the changes will override any colour settings that you may have made in the Kunena Template Manager; if you want different colours then you should examine the CSS code and adjust the values according to your own needs.

/*   A Kunena top menu like Protostar's "nav pills"  
      Note:  the colour codes used will override any settings you may have made in the Kunena Template Manager  */

#Kunena #ktop #ktab li > a, #Kunena #ktop #ktab li > a > span {
    background-color: transparent !important;
    color: #5388b4 !important;
}
#Kunena #ktop #ktab li > a:hover, #Kunena #ktop #ktab li > a:hover > span, #Kunena #ktop #ktab li > a:focus, #Kunena #ktop #ktab li > a:focus> span {
    background-color: #eee !important;
    color: #005580 !important;
    border-radius: 5px !important;
}
#Kunena #ktop #ktab li#current > a, #Kunena #ktop #ktab li#current > a > span {
    background-color: #5388b4 !important;
    border-radius: 5px !important;
    color: #eee !important;
}
#Kunena #ktop #ktab li > a {
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: 5px !important;
}
#Kunena #ktop #ktab li#current > a:hover, #Kunena #ktop #ktab li#current > a:hover > span, #Kunena #ktop #ktab li#current > a:focus, #Kunena #ktop #ktab li#current > a:focus > span {
    color: #fff !important;
}

As we have explained in another article before, the best place to make these changes is a custom CSS file.

Stop hand nuvola.svg

Never directly edit or replace the original Kunena template source files including the .CSS files!
Any changes you make will be overwritten when you upgrade or re-install Kunena.

All of the changes described in this article should work equally well whether you’re using Kunena versions 2.0, 3.0 or 4.0.

About the author:

is a Joomla professional and former member of the Kunena project for more than 8 years—a substantial contributor to the original Kunena documentation project with over twenty thousand messages posted at the Kunena forum. The opinions expressed in this article are entirely those of the author. View his profile here.


Add comment
By submitting this form you agree to the site policy. All guest comments are subject to approval before they will be published.


Trending now