With the Vertical Menu you are really able to customize how the menu will look like on your frontend with the downloadable presets and predefined skins. But of course sometimes you need more, and this extension is also can help you within that. In the following you will learn more about how to customize the look of the menu by levels, and by items as well individually, if you need that. Different style for the levels can be useful to help to separate the several depths even if you have a dropdown, or accordion style menu. To customize an item is a great opportunity to highlight them from the others, if that link is more important.

Customize level properties

This kind of modification is fully possible with the built-in parameter options in the module manager. You just need to open the menu module to edit in your Module manager, and scroll down to the Theme manager tab, open it, and also open the Level 1 tab. Then you will see specified options for the Level settings.

Please note that those settings can be different in case of you are using the Flat or the Clean theme.

So the settings in this panel refers for the whole level itself, and also for all of the items. You can set background color for the whole level, active or hover background color for the items, different font settings and so on.

If you have only Level 1 tab set, all of the lower levels has the same styles in case of Slide and Drop-down navigation type. For the others there are predefined settings for the lower levels, but you can able to change them for the other levels in both cases by click on the Add Level button, and change the settings on that tab as well.

Custom style for an item only

This part is a bit more complex, but you don't have to be a skilled web-developer to make it happen. I will use the Google Chrome browser, and its inspector tool, but you can use any similar.

Step 1

First open your frontend where the Vertical Menu published, hover on the item what you would like to customize, and click on that with the right click to open the local menu. Then click on the Inspect item.

Step 2

Now you will see that the browser inspector appear. Now the container element of the menu item is selected. You should check its unique class, which is the off-nav-104. This is a generated name, where the 104 is the ID of the menu item.

Step 3

In this last step we only have to create our own style definition for that menu item. So open the Module manager of the Vertical Menu, scroll down to the Custom Codes tab, open it, and write the definition into the Custom CSS parameter. So the definition will look like this:

dt.off-nav-104 a {
   /*Your CSS definitions goes here*/
}

You can set anything here, what you would like and possible by CSS code, color, font-size, and so on. If the definition has no effect on the frontend, you might need to use the !important modifier.

Please note that in case of you write an invalid code, that cause issues for the menu, or other elements on the site.

• < Prev
• Next >