3colmenu

If you have a long list of items in a dropdown menu, you may wish to stack the titles into three columns. This way the titles won't fall off the screen on a wide monitor making it so the user can not access all of the titles.

See the image on the right for an example of a drop down menu with 3 stacked columns.

This method works best if your titles are relatively short. You can also modify this code to create a two column drop down.

Notes:

  • These instructions will work for Menu Modules placed into position-1.
  • The menu module must have the Menu Class Suffix of " nav-pills" applied for the styling to work properly.
  • The Menu Module needs to be set up to Show Sub-Menu Items

For mobile devices, you may need to disable this feature or adjust the containing element to fit a smaller screen within the @media section of your stylesheet.

Create a user.css for the new styles

If you do not have a custom stylesheet set up, you should put these styles into custom stylesheet. Modifying the template.css is not suggested as that file is overwritten when you upgrade your Joomla installation and your changes will be lost.

You can follow the instructions in the following article to create a user.css stylesheet.

Add a custom stylesheet to the Protostar template - user.css

Add a Menu Class Suffix to the Menu Module

3ColDrop

In your Joomla administrative menu, open up the module that creates your menu. This can be done in the Extensions section.

Extensions -> Modules

Likely this menu module will be called Main Menu, unless you have named it something else.

Click on the Advanced tab. In the box next to Menu Class Suffix you will likely already have added " nav-pills" with a space in front of the name.

Do not delete " nav-pills", but add a space and add a new class name of "threecoldrop".

What this does is allow you to target this menu with specific styles in your stylesheet.

Add these styles to the user.css stylesheet

Open up your user.css stylesheet in a text editor or by going through Template Manager in the Template column.

Now we need to add styles to <ul class="nav-child">

ul.threecoldrop li ul.nav-child {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Save the user.css to the css directory and open up the front end of your site. Test your dropdown menu to see if this works for you. You may wish to add your own styles to modify the appearance.


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.