Customize WordPress menus with images, widgets, blocks, CSS and more

Have you ever wished you could customize the menu on your WordPress website, perhaps to change the font, color, style, spacing, add images and more? Max Mega Menu enables you to do this.

The theme used on your WordPress site may be good, but it rarely does everything we want and sometimes we wished we could customize things. Maybe the menu is too big or small, doesn’t stand out, is visually unexciting, has the wrong spacing and leaves big gaps at the top or bottom, and so on. Maybe you wished you could use a more interesting font for it.

Everything can be changed using CSS, but most people do not know how. It can be complicated to modify the style of the menu bar used on a website and it is not something most people want to tackle because of the technical knowledge required.

Max Mega Menu makes everything easy to customize and almost every aspect of a menu can be modified, like colors, fonts, spacing, size, and so on. You can have the menu you always wanted, but didn’t have the technical knowledge to implement.

Let’s take a look at the Max Mega Menus plugin for WordPress. It is not the only menu plugin of its type and searching for ‘menu’ lists alternatives, however, it is the most popular and it has 400k active installations and a great score.

Create menus in WordPress

Most, maybe all WordPress themes have a menu and it is hard to think of an example that does not. A menu is a basic requirement for most websites, so one comes built in. Go to Appearance > Menus in the WordPress adimin interface and the menu structure is displayed.

WordPress menu editor
WordPress built-in menu creator and editor

Items in the small Add menu items block on the left can be selected and added to the large Menu structure block in the middle. Drag a menu item slightly to the right so that it is indented in the list and it becomes an item on a drop-down sub-menu.

Click the little down arrow (v) at the right of a menu item and attributes can be changed, like the menu text, called the navigation label. If you add, remove or change items, remember to click the Save button at the bottom of the page. Also remember that if your site uses caching for speed, you may not see the new menu until you clear the cache.

Customize menus in the them customizer

There may be features in the theme that enable you to customize the site’s menu. Go to Appearance > Customize > Menus to see what is available. Don’t be too surprised if there is little there apart from selecting the primary menu – it is possible to have multiple menus and different locations.

Customize menus in the WordPress theme customizer
The WordPress theme customizer

Often there are few controls to actually change the appearance of the menu, such as the colors, spacing, style and so on. Some people have resorted to trying to insert custom CSS commands or hack the theme to try to change the look of the menus, but this is not easy.

Change menu style with Max Mega Menus

Max Mega Menu is a free WordPress plugin that enables you to do almost anything you want with the menus on your WordPress website. There are thousands of WordPress themes and I cannot say it is compatible with every single one, but I tried some popular ones like Astra and GeneratePress and it was excellent.

Options and settings in Max Mega Menu plugin for WordPress
A few of the options in Max Mega Menu

One minor problem and it is not really a Max Mega Menu problem, is that the large number of configuration options can be overwhelming. You won’t believe how many settings there are for a simple menu on a web page.

Options and settings in Max Mega Menu plugin for WordPress
Max Mega Menu settings

You don’t have to configure or change every single setting and it is populated with the current settings from the theme. By default, the site menu is exactly the same as it was. However, now you can change something you don’t like, such as the foreground and background colors for the menu text, the spacing above and below, left and right of menu items or the menu itself, change the font and text size of the menu.

The menu bar and drop-down sub-menus are separate and can have the same or different settings. Not that you would want to, but you could have a red menu bar and when the mouse hovers over a menu item, a green sub-menu panel appears below in a completely different font.

There are menu settings, sub-menu settings, second level menu settings and third level menu settings and more. These are on tabs: General Settings, Menu Bar, mega Menus, Flyout Menus, Mobile Menu and Custom Styling.

Before Max Mega Menu:

WordPress website menu

After Max Mega Menu:

Styling a menu in WordPress

The biggest problem you will face is working out where a particular setting is located when you want to change something, like the syle of text, color, font and so on. It is confusing at first because of the large number of settings.

One feature I wished for is to apply current settings to sub-menus. If you change the top menu, you then have to find where the settings are for the sub-menus and manually copy the settings to them so they all use the same style. It would be useful to say, for example, apply this border, background, font, text color to all menu levels. It is tedious manually editing each level.

Add Mega Menus to your site

Max Mega Menu does more than style existing menus and it can add menus of its own. Mega Menus can have text, links, HTML code, images, icons and more. Go to Appearance > Menus and as the mouse hovers over any existing WordPress menu item, a Mega Menu button appears. Click it and a whole new type of menu is available.

You could create the top-level menu in WordPress, then add Mega Menus as sub-menus for each item. There are three display modes, flyout, standard layout and grid layout, and they determine how the Mega Menu content is displayed.

Max Mega Menu plugin for WordPress
Mega Menus in WordPress

The menu content is made up of widgets, selected from a list. These are the widgets you see in Appearance > Widgets, so there is Archives, Calendar, Image, Recent Comments, Text, Tag Cloud and many more.

Max Mega Menu plugin for WordPress
Add widgets to menus

Some would not look right in a menu, like Recent Comments, but some are very useful, like Text, Image, and HTML. These can be used to create a unique sub-menu that has unique features, functions and design. Instead of a menu showing plain text, you could show thumbnail images or icons for example.

Here is an example of the sort of things you can do with menus. Not that I would have a menu like this, I just wanted to show some different capabilities.

Max Mega Menu plugin for WordPress
Examples of Max Mega Menu widgets

Mega Menus are the width of a menu at most, so you need quite a wide menu bar to begin with so the Mega Menus have space for the content. It also takes a bit of trial and error to get it looking good, so expect to spend a bit of time on it.

Summing up

If you want to change a dull menu on a WordPress site to a more interesting, exciting and visual one, this is a great plugin. The free version is good enough for most people and has a heap of features, but there are even more features in the paid Pro version.

Max Mega Menus enables you to do things with WordPress menus that you cannot otherwise do. You can style every aspect of a menu, including colors, fonts, spacing, borders, transparency and more. You can also create Mega Menus that contain widgets and HTML blocks, which means you can do almost anything in a menu you want.

The only downside is the large number of options and settings. It could take you a whole day just to configure a menu the way you want it to be. Experimenting is best done on a test site because of this. Menu settings can be saved as a theme and imported and exported, so you can move everything to another site, like from test site to real site, quite easily.

Related articles:

Leave a Reply