Protostar: Applying Menu Class Suffixes (Horizontal vs. Vertical Menus)

When creating a new menu while using the Protostar template, you may notice that the menu is vertical, but you intended it to be horizontal. There is an easy fix for this: applying a menu class suffix that is already in the template master file. The video below illustrates how to accomplish this, and detailed instrutions and screenshots are below.

Below is an image of what a vertical-style menu looks like in the Protostar template.

To make the menu horizonal, you can simply apply a preexisting menu class suffix directly in the back end of your Joomla site. To begin, log into the back end of the site, and open the menu module that you've created. Once the menu module is open, click on the "Options" tab and then click on "Advanced Options".

In the "Menu Class Suffix" field, type in " nav-pills". Please be sure to hit the space bar one time before typing "nav-pills" to successfully apply the menu class suffix. Be sure to save your work.

Return to the front end of the site, refresh the page, and your menu should be horizontal.