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

by | Aug 9, 2022 | Etcetera | 0 comments

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.

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Final Design

2d Design

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

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.

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

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.

Divi Style Cart Search Icons Fullwidth Menu Add Global Header

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

Divi Style Cart Search Icons Fullwidth Menu Add Fullwidth Menu

Subsequent, insert the fullwidth menu module.

Divi Style Cart Search Icons Fullwidth Menu Add Fullwidth Menu

Add your brand to the menu.

Divi Style Cart Search Icons Fullwidth Menu Add Logo

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Background

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

  • Taste: Inline Targeted Emblem

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Layout Style

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Menu Font

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Text Settings

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
See also  How one can Construct an Tournament Web page That Drives Registrations

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Menu Text Hover Color

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Dropdown Color

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Dropdown Hover

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Color Settings

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Mobile Text Hover

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Enable Icons

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Icon Color

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Color Hover

Set the cart icon and seek icon sizes.

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Cart Size

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

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Padding

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

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Top Border

  • Backside Border Width: 3px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Bottom Border

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)

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Gradient Background

Set the Gradient Sort and Gradient Place.

  • Gradient Sort: Conical
  • Gradient Place: Backside

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Gradient Settings

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

  • Structure: Targeted

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Style

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Menu Font

Now set the Menu Textual content Measurement and Letter Spacing.

  • Menu Textual content Measurement: 20px
  • Menu Letter Spacing: 2px
See also  How to Configure WooCommerce Settings

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Text Size Spacing

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

  • Menu Textual content Measurement on Hover: 22px

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Text Size

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

Divi Style Cart Search Icon Dropdown Menu Settings

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

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Mobile Background Text

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icons

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icon Colors

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Color

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

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icon Size

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Icon

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

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Padding

Ultimate Design

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

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Background

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Menu Font

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

  • Menu Textual content Colour: #e7644a

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color

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

  • Menu Textual content Colour on Hover: #e84322

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color Hover

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

  • Menu Textual content Measurement: 21px
  • Menu Letter Spacing: 1px
Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Size Spacing

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

  • Menu Letter Spacing on Hover: 2px

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Hover Spacing

Set the textual content alignment to left.

  • Textual content Alignment: Left

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Alignment

Subsequent, trade the next Dropdown Menu settings.

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Dropdown Colors

  • Dropdown Menu Textual content Colour: #e7644a
  • Dropdown Menu Textual content Colour on Hover: #e84322
  • Dropdown Menu Energetic Hyperlink Colour: #e84322
See also  SEO vs SEM: Differences and Best Practices

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Background Text

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Enable Icons

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Colors

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Hover Options

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Size

Then, set the icon font dimension on hover.

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Size Hover

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

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Padding

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%;
}

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Custom CSS

Ultimate Design

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

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

Ultimate End result

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

First Design

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Final Design

2d Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

3rd Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

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.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.