Customizing The Secondary Menu in WordPress Divi Theme
Looking back on my recent years of web and WordPress development, I honestly do not recall how I ended up in the Divi Theme bandwagon. It has been at least two years, if not more, and I stand firmly in place with Divi (and the Divi Builder experience) as being the best WordPress theme and designer I’ve used since I began making websites with WordPress in 2010.
However, all that said, Divi is not perfect. Thankfully, there is a vast online network of Divi users that collaborate in help forums, training websites and more. Elegant Themes, the Divi designer, has their own detailed help site too that I’ve relied on quite a bit.
In this brief tutorial, I’ll show you how to customize your secondary menu to get new links in the menu bar above your main header menu.
Improving Your Header Menu
One of the features of the Divi theme is the ability to customize multiple menus. However, the default for customizing the menus is a bit limited. Divi allows for you to have two menus at the top.
The main one, your primary menu, is where you’ll put all your menu items, including dropdown sub-pages and so on. But you can also add to the menu bar above that.
To edit the features of this menu, go to your Theme Customizer. There are three ways to get there.
When you arrive in the customizer follow these steps:
- Navigate to Header & Navigation
- Header Elements. This is where you can share your phone, email and social links (add the actual links to social in the Divi Theme Options menu from the Dashboard).
- Secondary Menu Bar. This is where you’ll customize the appearance of the bar above your main menu
- Once you’ve customized this, you’re ready to add additional elements to your secondary menu (the bar above the main menu).
Setting Up A Secondary Menu
Like the customizer, creating menus can be accomplished in multiple ways. You can create one while you’re still in customize mode. Or you can do it from Appearance > Menus.
Create a new menu with any additional links you’d like in the secondary menu. Typically things you’d want here include links to newsletter sign-up, links to other forms, or any item you always want visible, but not necessarily in your main menu.
Assign this new menu to the location by selecting the Secondary Menu checkbox.
After you save the customizer, you’ll now see these links in the upper bar, aligned to the right.
Customizing The Alignment of the Secondary Menu
What if you want all your elements grouped together? If you’re like me, you’d like to see these elements aligned to the left with the prebuilt phone, email and social links you created earlier. Turns out, you can accomplish this quickly with a short piece of CSS.
/* Secondary menu to the left */
#et-secondary-menu {
float: left;
padding-left: 10px;
}
A few important notes here. In the code above, I have added “padding-left: 10px;” to it. This will provide a slight buffer between the social icons and your secondary menu.
If you don’t have any extra elements in your secondary menu, simply remove this line so there is no padding.
If you want your secondary menu center aligned, use this code.
/* Secondary menu to the center */
#et-secondary-menu {
float: none;
text-align: center;
}
To use these code snippets, you’ll need to save them onto your site. The easiest way to do this is to go to your Divi Theme Options menu in the Dashboard. Scroll to the very bottom and paste the code into the Custom CSS box, then Save Changes. You’ll immediately see the menu update.
It is possible you’ll need to adjust the settings to your preference, but you can do that by adjusting the CSS. Check this link for help on core CSS elements.
Final Note
Divi is a remarkably flexible theme and Elegant Themes is constantly improving it. I am a big fan and I hope you’ll fine this useful and of course, if you have any comments, questions or feedback, please let me know in the comments.
