When your first install a brand new installation of Joomla 3+ with Protostar, it comes with three modules already installed and published. The three modules are:

  • Breadcrumbs
  • Main Menu
  • Login Form

The Main Menu is put into position-7. This Module is a Menu module type, which means it is set up for pulling up a Menu that was created in Menu Manager. In a fresh Joomla installation suing the Protostar template, the Menu Manager has one menu, the Main Menu. You will see this menu displayed in a column on the right side of the web page.

Make the Main Menu Horizontal

If you wish to move the menu from the right column to a horizontal position above the content, follow these steps.

This is a two step process. It will help if you have previously added additional menu items to your site, just to test out if your styling changes have been applied.

Step 1:

Go to Extensions -> Module Manager. Click on the Main Menu module to allowing editing.

The default screen for all modules is the Module Tab. Now we need to change the position for your Main Menu module. The position that works best for a horizontal menu is position-1. Position-1 is placed into the <nav class="navigation"> div. 

Click here to see the article on: Default Module Positions

position1

Step 2:

While still in Main Menu module under Module Manager, click on the Advanced tab. In the text box next to Menu Class Suffix, type in nav-pills. PUT A SPACE BEFORE THE FIRST LETTER

Screenshot of Module Manager Advance Tab

What this does is add the class of nav-pills to the <ul> div in the <nav> div. The template.css template for Protostar has all sorts of styling for the "nav-pills" class.

Structure of the ul class="nav-pills"

The Protostar template will style these nav-pills with rounded corners, a background-color and a box-shadow. You can override this styling with your own custom stylesheet.

In your own stylesheet target this styling:

.nav-tabs > li, .nav-pills > li
.nav-tabs > li > a, .nav-pills > li > a

 

What about menus other than the Main Menu?

You can add the class of "nav-pills" to any Module that displays a menu. This Module Class Suffix will cause the menu items to line up horizontally. You should only use this if the menu has been put into a position that allows room for the menu items to line up this way.

What happens to this menu when displayed on narrow screens?

A Menu module with the class="nav-pills" will change the layout from horizontal to stacked for narrow screens because of the @media styles added to the template.css that comes with Protostar.

Can I add my own class and style that instead of using nav-pills?

You can add your own class and not use the "nav-pills", but keep in mind that "nav-pills" is designed to stack vertically for more narrow screens. You will need to do some special @media styling to replicate this responsive functionality.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.