Your site’s menu is among the maximum necessary parts to your site as a result of the direct have an effect on it might have at the means customers navigate thru your content material. A well-designed menu bar could make a large distinction via simplifying navigation, highlighting key pages, and boosting the full consumer enjoy. Divi’s fullwidth menu module gives nice flexibility via permitting you to taste the cart and seek icons then again you please. On this educational, we will be able to display you 3 other designs for the fullwidth menu module with other styling for the cart and seek icons.

Let’s get began!

Sneak Peek

Here’s a preview of what we will be able to design.

First Design

For the primary design, we’re striking some of the icons at the left, and the opposite at the proper via settling on a targeted menu construction. We’ll additionally trade the colour on hover.

2d Design

For the second one design, we’re striking each icons at the proper aspect and converting the colour on hover.

3rd Design

For the 3rd design, we’re the use of some further CSS to taste the icons. You’ll use those self same CSS categories to taste the icons then again you wish to have.

What You Want to Get Began

Sooner than we start, install and activate the Divi Theme and make sure to have the most recent model of Divi to your site.

Now, you are prepared to start out!

The way to Taste the Cart and Seek Icons on your Divi Fullwidth Menu Module

Construct the World Header

For each and every of the 3 menu designs, we will be able to get started via opening the Theme Builder from the Divi segment of the WordPress Admin Panel. Make a selection Upload World Header, then choose Construct World Header.

Insert a brand new fullwidth segment, then delete the empty common segment.

Subsequent, insert the fullwidth menu module.

Add your brand to the menu.

Now we’re in a position to construct our design.

First Design

Our first design will incorporate Divi’s integrated hover results to modify the colour of the textual content and icons on hover. Let’s get began.

Get started via opening the fullwidth menu settings and including a background.

• Background: #fbf9f4

Navigate to the design tab and choose the inline targeted brand structure.

• Taste: Inline Targeted Emblem

Now let’s trade one of the menu textual content settings.

• Energetic Hyperlink Colour: #09148c
• Menu Font: Rubik
• Menu Font Weight: Daring
• Menu Font Taste: Capitalized and Underlined

Subsequent, set the menu textual content shade, textual content dimension, and letter spacing.

• Menu Textual content Colour: #000000
• Menu Textual content Measurement: 21px
• Menu Letter Spacing: 1px

We wish to upload some hover results to this menu, so choose the hover icon for the menu textual content shade. Set a special menu textual content shade on hover.

• Menu Textual content Colour on Hover #b70018

Subsequent, navigate to the dropdown menu settings below the Design tab.

• Dropdown Menu Background Colour: #fbf9f4
• Dropdown Menu Line Colour: #b70018
• Dropdown Menu Textual content Colour: #000000

We wish the dropdown menu textual content shade to modify on hover too, so choose the hover choices for this environment and set a special textual content shade on hover.

• Dropdown Menu Textual content Colour on Hover: #b70018

• Dropdown Menu Energetic Hyperlink Colour: #b70018
• Cellular Menu Background Colour: #fbf9f4
• Cellular Menu Textual content Colour: #000000

As soon as once more, we wish the cellular menu textual content shade to modify on hover. Make a selection the hover choices for this environment, then set a special textual content shade on hover.

• Cellular Menu Textual content Colour on Hover: #b70018

Customizing the Cart and Seek Icon

Now let’s upload and customise the cart and seek icons. Underneath the Content material tab, navigate to Parts and permit the buying groceries cart icon and the quest icon.

• Display Buying groceries Cart Icon: Sure
• Display Seek Icon: Sure

Return to the design tab and open the icon settings. Each and every of our icons can be black, and can be pink on hover. First, set the black shade.

• Buying groceries Cart Icon Colour: #000000
• Seek Icon Colour: #000000
• Hamburger Menu Icon Colour: #000000

Subsequent, choose the hover icon and upload the hover shade.

• Buying groceries Cart Icon Colour on Hover: #b70018
• Seek Icon Colour on Hover: #b70018
• Hamburger Menu Icon Colour on Hover: #b70018

Set the cart icon and seek icon sizes.

• Buying groceries Cart Icon Font Measurement: 25px
• Seek Icon Font Measurement: 25px

Navigate to the Spacing segment, then set the highest and backside padding.

• Padding-Most sensible: 5px
• Padding-Backside: 5px

In any case, we’re going to upload a border to the highest and backside of the menu module. Open the border settings.

• Most sensible Border Width: 3px

• Backside Border Width: 3px

Ultimate Design

And here’s our ultimate design.

2d Design

Our 2nd design will make the most of Divi’s integrated hover results to modify the dimensions of the menu icons and textual content on hover. Let’s get began.

First, we will be able to upload a background gradient to the menu module. The gradient has 3 stops, the settings are as follows:

• First Forestall: 0%, rgba(255,255,255,0)
• 2d Forestall: 23%, rgba(252,199,76,0.65)
• 3rd Forestall: 82%, rgba(232,119,255,0.32)

Set the Gradient Sort and Gradient Place.

• Gradient Sort: Conical
• Gradient Place: Backside

Subsequent, navigate to the Design tab and set the structure.

• Structure: Targeted

Transfer to the Menu Textual content segment to customise the menu textual content design.

• Energetic Hyperlink Colour: #FFFFFF
• Menu Font: Syne
• Menu Font Weight: Daring
• Menu Font Taste: Capitalized

Now set the Menu Textual content Measurement and Letter Spacing.

• Menu Textual content Measurement: 20px
• Menu Letter Spacing: 2px

Since we wish our menu textual content dimension to extend on hover, choose the hover choice.

• Menu Textual content Measurement on Hover: 22px

Subsequent, trade the Dropdown Menu design settings.

• Dropdown Menu Background Colour: #fcda90
• Dropdown Menu Line Colour: #FFFFFF
• Dropdown Menu Textual content Colour: #FFFFFF
• Dropdown Menu Energetic Hyperlink Colour: #FFFFFF

Set the background and textual content shade for the cellular menu.

• Cellular Menu Background Colour: #fcda90
• Cellular Menu Textual content Colour: #FFFFFF

Customizing the Cart and Seek Icon

Now let’s get began customizing our menu icons. Navigate to Parts below the Content material tab and permit the buying groceries cart icon and the quest icon.

• Display Buying groceries Cart Icon: Sure
• Display Seek Icon: Sure

Return to the design tab and open the icon settings.

• Buying groceries Cart Icon Colour: #000000
• Seek Icon Colour: #000000
• Hamburger Menu Icon Colour: #000000

The icons could have a dismal orange shade on hover. Make a selection the quilt choice and set the colour.

• Buying groceries Cart Icon Colour on Hover: #fcac00
• Seek Icon Colour on Hover: #fcac00
• Hamburger Menu Icon Colour on Hover: #fcac00

Subsequent, set the font dimension for the cart and seek icons.

• Buying groceries Cart Icon Font Measurement: 25px
• Seek Icon Font Measurement: 25px

To set the icon dimension to extend on hover, choose the hover choice.

• Buying groceries Cart Icon Font Measurement on Hover: 30px
• Seek Icon Font Measurement on Hover: 30px

In any case, transfer to the Spacing segment and set the highest and backside padding.

• Padding-Most sensible: 5px
• Padding-Backside: 5px

Ultimate Design

Here’s the overall design for our 2nd menu structure.

3rd Design

For our ultimate design, we will be able to upload a background circle at the back of the cart icons the use of customized CSS. Let’s get began.

First, upload a background shade to the fullwidth menu module.

• Background: #efb6ac

Subsequent, navigate to the Design tab and open the Menu Textual content choices.

• Energetic Hyperlink Colour: #e84322
• Menu Font: Cinzel
• Menu Font Weight: Extremely Daring

We wish the menu textual content shade to modify on hover. First, set the menu textual content shade.

• Menu Textual content Colour: #e7644a

Click on the hover icon and set the hover textual content shade.

• Menu Textual content Colour on Hover: #e84322

Subsequent, set the menu textual content dimension and letter spacing.

• Menu Textual content Measurement: 21px
• Menu Letter Spacing: 1px

We additionally need the letter spacing to increase on hover, so choose the hover choice for the environment.

• Menu Letter Spacing on Hover: 2px

Set the textual content alignment to left.

• Textual content Alignment: Left

Subsequent, trade the next Dropdown Menu settings.

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

• Dropdown Menu Textual content Colour: #e7644a
• Dropdown Menu Textual content Colour on Hover: #e84322
• Dropdown Menu Energetic Hyperlink Colour: #e84322

Set the background and textual content shade for the cellular menu.

• Cellular Menu Background Colour: #efb6ac
• Cellular Menu Textual content Colour: #e7644a
• Cellular Menu Textual content Colour on Hover: #e84322

Customizing the Cart and Seek Icon

First, navigate to Parts below the Content material tab and permit the buying groceries cart icon and the quest icon.

• Display Buying groceries Cart Icon: Sure
• Display Seek Icon: Sure

Subsequent, return to the design tab and open the icon settings. Set the icon shade.

• Buying groceries Cart Icon Colour: #e7644a
• Seek Icon Colour: #e7644a
• Hamburger Menu Icon Colour: #e7644a

The colour of those icons will trade on hover. Allow the hover choices and set the colour.

• Buying groceries Cart Icon Colour on Hover: #e84322
• Seek Icon Colour on Hover: #e84322
• Hamburger Menu Icon Colour on Hover: #e84322

We additionally need the icon dimension to extend on hover. First, set the icon font dimension.

• Buying groceries Cart Icon Font Measurement: 22px
• Seek Icon Font Measurement: 22px

Then, set the icon font dimension on hover.

• Buying groceries Cart Icon Font Measurement on Hover: 26px
• Seek Icon Font Measurement on Hover: 26px

Subsequent, navigate to the Spacing segment and upload most sensible and backside padding.

• Padding-Most sensible: 5px
• Padding-Backside: 5px

In any case, we will upload some customized CSS to the worldwide header so as to add the circles at the back of the cart and seek icon. You’ll customise this CSS then again you wish to fit the design of your menu module.

Open the Header Template Settings, then navigate to the Complex tab and insert the next customized 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%;
}

Ultimate Design

That completes the design for our 3rd and ultimate menu structure.

Ultimate End result

Now let’s check out the overall design for the 3 menu modules.

First Design

2d Design

3rd Design

Ultimate Ideas

Divi’s menu module and cart and seek icons are simple to customise with the intention to create distinctive layouts and designs on your site. You’ll simply raise the glance of your menu modules the use of integrated Divi settings like hover results and customized CSS. Confidently this educational has given you some design inspiration you’ll be able to put into effect on your personal site as properly! How have you ever custom designed the glance of your menu module and icons? Tell us within the feedback!

The publish How to Style the Cart & Search Icons in Your Divi Fullwidth Menu Module gave the impression first on Elegant Themes Blog.