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
From 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.
Using 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.
 |
Never directly edit or replace the original Kunena template source files including the .CSS files! |
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.
