PHPMatters Help You Better Hosting Your PHP-based Sites
How to Create a  Joomla Horizontal Menu and a Normal Menu

How to Create a Joomla Horizontal Menu and a Normal Menu

The creation of navigation menu is important as it works as an inner channel to make your website easy to browse. By default, the site menu of Joomla is displayed in a vertical way, but you can make a horizontal one using some special CSS classes. In the following, we have listed every step concerning about the setting up of Joomla menu for both the normal one and the horizontal one.

Create Joomla Normal Menu

As the creation of a Joomla menu can be done completely via the admin, so in the very beginning, you need to log into your dashboard and navigate to the Menus tab. Then, click the Menu Manager.

Menu Manager

Now, you can start a menu by hitting the Add New button. In the next page, you need to enter the menu details including the Title, Menu Type and Description.

Note that the Title option determines how your menu can be displayed in the Menu Manager list; Menu Type decides its system name; Description showcases why it exists in your website. Once finish them, do not forget to save the settings.

Menu Details

In fact, you have already created a vertical menu now, but due to the requirement of Joomla system, you also need to add a module for that menu.

The process is easy. You only need to back to your Menu Manager and locate your newly-created one. Under the Linked Modules column, you can find a link that helps you create a menu module. Click it.

Linked Module

Here, you can make a lot of configurations for you to do. But basically, you only need to do two things – enter the module name and decide the module position based on your template design. Next, click on the Save button and go to your homepage to view your navigation bar.

Create Joomla Horizontal Menu

As the creation of Joomla horizontal menu achieves by the modification of the vertical one, you can start by configuring your already-built normal menu previously. Note that this practice requires the utilization of menu class suffix. Here, we’d like to introduce two options – the “nav-pills” one and the “horizontal_menu” one.

No matter which option you choose, you should firstly enter your Menu Manger and locate your newly-created normal menu. Then, click it for editing.

In this page, you can find a tab named as “Advanced”. Simply choose it and focus on the Menu Class Suffix setting.

Menu Class Suffix

In the blank space, you can enter either nav-pills or horizontal_menu classes. After that, simply save the changes and view your homepage.

Here, we have to note that the first class is coming from the Bootstrap that is an addition of Joomla higher than version 3. Therefore, you can directly use it to make your menu horizontally. However, if you want to use the second option, you need to enter some lines of coding into your current template to enable the function.

Navigate to your Template Manager and choose the template you are currently utilizing. In the left side, you can find a folder named as “css”. Click it to open the “general.css” file.

General CSS File

After pressing Ctrl-Q to toggle the full-screen edit page, you can copy and paste the following code into this file. Once done, you need to go back to the Menu Class Suffix step and enter the corresponding horizontal class.

.horizontal_menu li