How To Build An Effective Navigation Menu With Divi
Welcome to Design With Divi
Design With Divi is a new weekly blogging series for creative entrepreneurs where I share tips and tutorials that will help your Divi website stand out beautifully. Want to stay in the loop? Enter your email to receive the latest updates, and be sure to follow the hashtag #DesignWithDivi on Instagram!
If you missed last week’s post, check it out here:
How To Style Your Divi Blog Page
Your top header is one of the most important parts of your website. It’s the first thing your visitor sees and goes to get access to the information that they want. You should be putting in as much effort to make it as easy as possible for them. In this post, I’m going over how to build an effective navigation menu with the Divi theme.
Complete the Menu Basics
Step 1. Upload your logo.
Go to your WP Dashboard > Divi > Theme Options > Upload Your Logo Image > Save Changes.
Pro Tip: I like to upload my logo as a SVG file to get the best quality. By default, WordPress’ Media Library isn’t compatible with SVG file upload, but you can download this plugin to enable SVG Support.
Step 2. Set up your Primary Menu.
Go to your WP Dashboard > Appearance > Menus > Click “Create a new menu” > Give your new menu a name (i.e. “Primary Menu”) > Add your pages from the left panel > Set Menu Location to Primary Menu > Click Save Menu.
Step 3. Select your header style.
Go to your WP Dashboard > Divi > Theme Customizer > Header & Navigation > Header Format > Select the one that best fits your website’s style.
Out of the box, Divi comes with 5 different header styles:
Default: Places the logo to the left with the navigation to the right.
Centered: Places the logo centered on top of the navigation menu.
Centered Inline Logo: Places the logo in the center of the navigation menu.
Slide In: Places the logo on the left with the navigation opening from the right side.
Full Screen: Places the logo on the left with the navigation opening to full screen.
Tips for An Effective Navigation Menu
Now, in order to ensure your header is effective, follow these tips:
1. Balance Your Logo.
Yes, your logo is important, but so is your main headline, featured image, copy, etc. You wouldn’t want your logo to overwhelm your page and take up all of the room. Keep it to a size that is proportionate with the rest of your menu items.
To adjust your menu and logo height, go to your Divi Theme Customizer > Header & Navigation > Primary Menu Bar > Adjust the settings for Menu Height and Logo Max Height accordingly.
2. Simplify Your Page Titles.
When it comes to your page title, keep it short and simple. You can fit all of those creative keywords and unique phrases within the content of the page, but as for the title? Stick to words that easily tell your reader what your page is about to allow readers to easily navigate your site.
3. Add A Search Bar.
If the visitor knows exactly what they want from your site, they will most likely type it in a search bar to find it, so including a search bar makes the process that much easier. Before you publish, test out your search bar to see if it works how you want it to. Type in keywords that you think your visitor will be using, and see if the correct results show up.
To include a search bar in your Divi header, go to your Theme Customizer > Header & Navigation > Header Elements > Check off “Show Search Icon”
4. Minimize Your Dropdowns.
Too many menu items in your dropdown could overwhelm your visitor. Not to mention, these are difficult for search engines to find. Group submenu items neatly together, and remember that less is more.
5. Include a Call To Action Button
Turn one menu item into a button that stands out from the rest of your menu items. It could be for your blog page, membership login, contact page, course page, etc. This will help make it stand out and entice visitors to click on it.
To turn your menu item into a call to action, follow this video tutorial.
6. Test It On Small Screens.
It’s important that your site looks good and functions correctly on multiple screen sizes. Take a look at what your website looks like on a tablet and mobile device. Make sure your header isn’t taking up too much vertical space, and that the menu items are large enough to view and click through.
7. Enable An Active Link Color.
Let your visitor know what page they’re on by highlighting or changing the color of the menu item. This makes it easy for your visitor to know their location once they navigate away from the homepage.
To adjust your Active Link Color, go to your Divi Theme Customizer > Header & Navigation > Primary Menu > Select your Active Link Color.
Examples of Divi Website Navigation Menus
Default (with a Call To Action Button)
Centered Inline Logo (With Search Icon)
Source: brandedbybritt.co (My own website)
Source: Villa Child Theme by Divi Soup
I hope this post helps give you an idea on how to design your navigation menu for your Divi website.