Your website’s menu is one of the most important elements on your website because of the direct impact it can have on the way users navigate through your content. A well-designed menu bar can make a big difference by simplifying navigation, highlighting key pages, and boosting the overall user experience. Divi’s fullwidth menu module offers great flexibility by allowing you to style the cart and search icons however you please. In this tutorial, we will show you three different designs for the fullwidth menu module with different styling for the cart and search icons.
Let’s get started!
Sneak Peek
Here is a preview of what we will design.
First Design
For the first design, we’re placing one of the icons on the left, and the other on the right by selecting a centered menu structure. We’ll also change the color on hover.
Second Design
For the second design, we’re placing both icons on the right side and changing the color on hover.
Third Design
For the third design, we’re using some additional CSS to style the icons. You can use those same CSS classes to style the icons however you want.
What You Need to Get Started
Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.
Now, you are ready to start!
How to Style the Cart and Search Icons in your Divi Fullwidth Menu Module
Build the Global Header
For each of the three menu designs, we will start by opening the Theme Builder from the Divi section of the WordPress Admin Panel. Select Add Global Header, then select Build Global Header.
Insert a new fullwidth section, then delete the empty regular section.
Next, insert the fullwidth menu module.
Upload your logo to the menu.
Now we are ready to build our design.
First Design
Our first design will incorporate Divi’s built-in hover effects to change the color of the text and icons on hover. Let’s get started.
Start by opening the fullwidth menu settings and adding a background.
Navigate to the design tab and select the inline centered logo layout.
Now let’s change some of the menu text settings.
Next, set the menu text color, text size, and letter spacing.
We want to add some hover effects to this menu, so select the hover icon for the menu text color. Set a different menu text color on hover.
Next, navigate to the dropdown menu settings under the Design tab.
We want the dropdown menu text color to change on hover too, so select the hover options for this setting and set a different text color on hover.
Once again, we want the mobile menu text color to change on hover. Select the hover options for this setting, then set a different text color on hover.
Customizing the Cart and Search Icon
Now let’s add and customize the cart and search icons. Under the Content tab, navigate to Elements and enable the shopping cart icon and the search icon.
Go back to the design tab and open the icon settings. Each of our icons will be black, and will be red on hover. First, set the black color.
Next, select the hover icon and add the hover color.
Set the cart icon and search icon sizes.
Navigate to the Spacing section, then set the top and bottom padding.
Finally, we are going to add a border to the top and bottom of the menu module. Open the border settings.
Final Design
And here is our final design.
Second Design
Our second design will utilize Divi’s built-in hover effects to change the size of the menu icons and text on hover. Let’s get started.
First, we will add a background gradient to the menu module. The gradient has three stops, the settings are as follows:
Set the Gradient Type and Gradient Position.
Next, navigate to the Design tab and set the layout.
Move to the Menu Text section to customize the menu text design.
Now set the Menu Text Size and Letter Spacing.
Since we want our menu text size to increase on hover, select the hover option.
Next, change the Dropdown Menu design settings.
Set the background and text color for the mobile menu.
Customizing the Cart and Search Icon
Now let’s get started customizing our menu icons. Navigate to Elements under the Content tab and enable the shopping cart icon and the search icon.
Go back to the design tab and open the icon settings.
The icons will have a dark orange color on hover. Select the cover option and set the color.
Next, set the font size for the cart and search icons.
To set the icon size to increase on hover, select the hover option.
Finally, move to the Spacing section and set the top and bottom padding.
Here is the final design for our second menu layout.
Third Design
For our final design, we will add a background circle behind the cart icons using custom CSS. Let’s get started.
First, add a background color to the fullwidth menu module.
Next, navigate to the Design tab and open the Menu Text options.
We want the menu text color to change on hover. First, set the menu text color.
Click the hover icon and set the hover text color.
Next, set the menu text size and letter spacing.
We also want the letter spacing to expand on hover, so select the hover option for the setting.
Set the text alignment to left.
Next, change the following Dropdown Menu settings.
Set the background and text color for the mobile menu.
Customizing the Cart and Search Icon
First, navigate to Elements under the Content tab and enable the shopping cart icon and the search icon.
Next, go back to the design tab and open the icon settings. Set the icon color.
The color of these icons will change on hover. Enable the hover options and set the color.
We also want the icon size to increase on hover. First, set the icon font size.
Then, set the icon font size on hover.
Next, navigate to the Spacing section and add top and bottom padding.
Finally, we can add some custom CSS to the global header to add the circles behind the cart and search icon. You can customize this CSS however you would like to match the design of your menu module.
Open the Header Template Settings, then navigate to the Advanced tab and insert the following custom CSS.
Final Design
That completes the design for our third and final menu layout.
Final Result
Now let’s take a look at the final design for the three menu modules.
Third Design
Final Thoughts
Divi’s menu module and cart and search icons are easy to customize in order to create unique layouts and designs for your website. You can easily elevate the look of your menu modules using built-in Divi settings like hover effects and custom CSS. Hopefully this tutorial has given you some design inspiration you can implement in your own website as well! How have you customized the look of your menu module and icons? Let us know in the comments!
This content was originally published here.