Styling navigation menus

Simplified and clear navigation menus make the site more accessible to the user. The menu should be designed to let the user visit the most important parts of the site with a single click and let the user know what they are viewing at any given moment. WordPress generates a simple list-based menu by default. We can use the theme to modify the menu functionality and create stylish menus.

In this recipe, we are going to look at the process of changing the existing menu design using custom styles for menus.

Getting ready

We need to create a navigation menu before we get started with styling. Follow these steps to create a navigation menu for the Twenty Twenty child theme:

1. Log in to the WordPress Dashboard as an administrator.
2. Click the Appearance menu.
3. Click the Menus option. You will see the following screen:

4. Click the create a new menu link.
5. Add a menu name of Primary Menu and click the Create Menu button.
6. Select some menu items from the left-hand panel and click Add to Menu.
7. Click the Save menu button.

Now, we have created a menu that can be used for custom styling.

How to do it...

We have created a basic menu for the Twenty Twenty theme. In this recipe, we are going to style each menu item using custom classes. To do this, follow these steps:

1. Log in to the WordPress Dashboard as an administrator.
2. Click on the Appearance menu.
3. Click on the Menu option. You will see a screen similar to the following showing the menu we created in the Getting ready section of this recipe:

4. Click the Screen Options menu at the top to view the enabled/disabled settings for the menu section. You will see the following screen:

5. Click the CSS Classes option if it's not selected in your menu section. This will enable the CSS Class setting for each menu item.
6. Click the down arrow of one of the menu items to open the menu item and its settings. The following screenshot shows a menu item's settings with the CSS Classes option enabled:

7. Add a custom name(s) for the CSS class(es) to this menu item. We can add multiple classes by separating them with spaces. In this case, we have to add a class called wpc-home-menu-item. The class names that we added in this section will be used later in CSS files to add styles.
8. Click the Save Menu button to save the settings.
9. Click the Manage Locations tab to get to the following screen:

10. Set the Primary Menu we created in the Getting ready section to Desktop Horizontal Menu.
11. Click the Save Changes button.
12. Open wp-content/themes/twentytwentychild/style.css with a text or code editor.
13. Add the following CSS styles at the end of the file to customize the styles of the home menu item:

.wpc-home-menu-item{
 background: #1862a2;
 padding: 5px;
 border: 1px solid;
}
.wpc-home-menu-item a{
 color : #fff !important;
}

14. Save the file.

Now, you can visit the home page of the site to see the modified menu item. In this case, we have changed the default styles of the home menu item. The following screenshot shows the home menu item with custom styling:

Usually, menu item styling is done to highlight specific menu items among others. We can use this kind of menu item-specific style for calls to action buttons or links to external sites.

We can follow this process for each menu item and add custom styles of our choice using custom CSS classes.

How it works...

Once we define CSS classes using the CSS Classes option in the menu item, it will be added to the <li> element of each menu item, along with the built-in CSS classes. You can check the applied CSS classes by using the browser inspection tool on the menu item. The modified menu item code will look something similar to the following:

<li id="menu-item-12" class=" wpc-home-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-12 is-focused"><a href="http://www.yoursite.com/home/">Home</a></li>

As you can see, the element contains the wpc-home-menu-item class, followed by built-in CSS classes such as menu-item and menu-item-post_type. Then, we need to add the CSS code from Step 13 to the style.css file of the theme.

We used custom CSS to highlight the home menu item with a background color, padding, and a border. Also, we changed the color of the menu link to #000 to match the background color of the menu item.

Once styles for this class have been added to the style.css file of the theme, the changes will be shown on the menu. So, the menu item will be highlighted among the other menu items. We can also use the same class on multiple or all menu items to style a set of menu items differently from others.

There's more...

In this recipe, we looked at the process of using our own CSS on menu items to customize the styles of the default menu. However, we have the option of using existing menu plugins to completely customize and build a stylish menu without writing a single line of code. Let's take a look at how we can use an existing plugin to completely change the styles and effects of the entire menu:

1. Go to the Plugins | Add New section from the Dashboard
2. Search for Max Mega Menu in the Search Plugins field
3. Install and activate the plugin
4. Click Appearance | Menus. Here, you will see a new settings section alongside the menu for Max Mega Menu, as shown in the following screenshot:

5. Click the Enable checkbox
6. Change the events and settings based on your preference
7. Hover over any menu item and click the Mega Menu button
8. Click the icon tab and select an icon
9. Follow steps 7 and 8 for each menu item
10. Click the Save Menu button

Now, you can visit the home page of the site to see the modified menu that was generated by the Max Mega Menu plugin. You will see a stylish menu similar to the following with menu icons, animations, and a professional design:

We can use such plugins to easily convert the entire menu design or design of specific menu items.

Before moving on to the next recipe, remove the custom CSS for the home menu item we added in the style.css file of the child theme and deactivate the Max Mega Menu plugin.