How to Style the Cart & Search Icons in Your Divi Fullwidth Menu Module

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. The Divi 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.

• Background: #fbf9f4

Navigate to the design tab and select the inline centered logo layout.

• Style: Inline Centered Logo

Now let’s change some of the menu text settings.

• Active Link Color: #09148c
• Menu Font: Rubik
• Menu Font Weight: Bold
• Menu Font Style: Capitalized and Underlined

Next, set the menu text color, text size, and letter spacing.

• Menu Text Color: #000000
• Menu Text Size: 21px
• Menu Letter Spacing: 1px

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.

• Menu Text Color on Hover #b70018

Next, navigate to the dropdown menu settings under the Design tab.

• Dropdown Menu Background Color: #fbf9f4
• Dropdown Menu Line Color: #b70018
• Dropdown Menu Text Color: #000000

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.

• Dropdown Menu Text Color on Hover: #b70018

• Dropdown Menu Active Link Color: #b70018
• Mobile Menu Background Color: #fbf9f4
• Mobile Menu Text Color: #000000

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.

• Mobile Menu Text Color on Hover: #b70018

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.

• Show Shopping Cart Icon: Yes
• Show Search Icon: Yes

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.

• Shopping Cart Icon Color: #000000
• Search Icon Color: #000000
• Hamburger Menu Icon Color: #000000

Next, select the hover icon and add the hover color.

• Shopping Cart Icon Color on Hover: #b70018
• Search Icon Color on Hover: #b70018
• Hamburger Menu Icon Color on Hover: #b70018

Set the cart icon and search icon sizes.

• Shopping Cart Icon Font Size: 25px
• Search Icon Font Size: 25px

Navigate to the Spacing section, then set the top and bottom padding.

• Padding-Top: 5px
• Padding-Bottom: 5px

Finally, we are going to add a border to the top and bottom of the menu module. Open the border settings.

• Top Border Width: 3px

• Bottom Border Width: 3px

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:

• First Stop: 0%, rgba(255,255,255,0)
• Second Stop: 23%, rgba(252,199,76,0.65)
• Third Stop: 82%, rgba(232,119,255,0.32)

Set the Gradient Type and Gradient Position.

• Gradient Type: Conical
• Gradient Position: Bottom

Next, navigate to the Design tab and set the layout.

• Layout: Centered

Move to the Menu Text section to customize the menu text design.

• Active Link Color: #FFFFFF
• Menu Font: Syne
• Menu Font Weight: Bold
• Menu Font Style: Capitalized

Now set the Menu Text Size and Letter Spacing.

• Menu Text Size: 20px
• Menu Letter Spacing: 2px

Since we want our menu text size to increase on hover, select the hover option.

• Menu Text Size on Hover: 22px

Next, change the Dropdown Menu design settings.

• Dropdown Menu Background Color: #fcda90
• Dropdown Menu Line Color: #FFFFFF
• Dropdown Menu Text Color: #FFFFFF
• Dropdown Menu Active Link Color: #FFFFFF

Set the background and text color for the mobile menu.

• Mobile Menu Background Color: #fcda90
• Mobile Menu Text Color: #FFFFFF

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.

• Show Shopping Cart Icon: Yes
• Show Search Icon: Yes

Go back to the design tab and open the icon settings.

• Shopping Cart Icon Color: #000000
• Search Icon Color: #000000
• Hamburger Menu Icon Color: #000000

The icons will have a dark orange color on hover. Select the cover option and set the color.

• Shopping Cart Icon Color on Hover: #fcac00
• Search Icon Color on Hover: #fcac00
• Hamburger Menu Icon Color on Hover: #fcac00

Next, set the font size for the cart and search icons.

• Shopping Cart Icon Font Size: 25px
• Search Icon Font Size: 25px

To set the icon size to increase on hover, select the hover option.

• Shopping Cart Icon Font Size on Hover: 30px
• Search Icon Font Size on Hover: 30px

Finally, move to the Spacing section and set the top and bottom padding.

• Padding-Top: 5px
• Padding-Bottom: 5px

Final Design

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.

• Background: #efb6ac

Next, navigate to the Design tab and open the Menu Text options.

• Active Link Color: #e84322
• Menu Font: Cinzel
• Menu Font Weight: Ultra Bold

We want the menu text color to change on hover. First, set the menu text color.

• Menu Text Color: #e7644a

Click the hover icon and set the hover text color.

• Menu Text Color on Hover: #e84322

Next, set the menu text size and letter spacing.

• Menu Text Size: 21px
• Menu Letter Spacing: 1px

We also want the letter spacing to expand on hover, so select the hover option for the setting.

• Menu Letter Spacing on Hover: 2px

Set the text alignment to left.

• Text Alignment: Left

Next, change the following Dropdown Menu settings.

• Dropdown Menu Background Color: #efb6ac
• Dropdown Menu Line Color: #e7644a

• Dropdown Menu Text Color: #e7644a
• Dropdown Menu Text Color on Hover: #e84322
• Dropdown Menu Active Link Color: #e84322

Set the background and text color for the mobile menu.

• Mobile Menu Background Color: #efb6ac
• Mobile Menu Text Color: #e7644a
• Mobile Menu Text Color on Hover: #e84322

Customizing the Cart and Search Icon

First, navigate to Elements under the Content tab and enable the shopping cart icon and the search icon.

• Show Shopping Cart Icon: Yes
• Show Search Icon: Yes

Next, go back to the design tab and open the icon settings. Set the icon color.

• Shopping Cart Icon Color: #e7644a
• Search Icon Color: #e7644a
• Hamburger Menu Icon Color: #e7644a

The color of these icons will change on hover. Enable the hover options and set the color.

• Shopping Cart Icon Color on Hover: #e84322
• Search Icon Color on Hover: #e84322
• Hamburger Menu Icon Color on Hover: #e84322

We also want the icon size to increase on hover. First, set the icon font size.

• Shopping Cart Icon Font Size: 22px
• Search Icon Font Size: 22px

Then, set the icon font size on hover.

• Shopping Cart Icon Font Size on Hover: 26px
• Search Icon Font Size on Hover: 26px

Next, navigate to the Spacing section and add top and bottom padding.

• Padding-Top: 5px
• Padding-Bottom: 5px

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.

.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}

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.

First Design

Second Design

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!