(855)-537-2266 sales@kerbco.com

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.

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Dropdown 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.

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Top Border

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.

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Dropdown Colors

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.