Your web page’s menu is one of the most vital portions in your web page because of the direct impact it’s going to perhaps have on the method shoppers navigate through your content material subject material. A well-designed menu bar may just make a big difference by the use of simplifying navigation, highlighting key pages, and boosting the entire client enjoy. Divi’s fullwidth menu module provides great flexibility by the use of allowing you to style the cart and search icons on the other hand you please. In this tutorial, we will show you 3 different designs for the fullwidth menu module with different styling for the cart and search icons.
Let’s get started!
Sneak Peek
Right here’s a preview of what we will design.
First Design
For the principle design, we’re hanging one of the vital icons on the left, and the other at the right kind by the use of settling on a focused menu development. We’ll moreover industry the color on hover.
2nd Design
For the second design, we’re hanging each and every icons at the right kind facet and changing the color on hover.
third Design
For the third design, we’re using some additional CSS to style the icons. You’ll be capable of use those same CSS classes to style the icons on the other hand you wish to have.
What You Want to Get Started
Forward of we begin, set up and turn on the Divi Theme and bear in mind to have the latest style of Divi in your web page.
Now, you’re able to start out out!
Find out how to Style the Cart and Search Icons to your Divi Fullwidth Menu Module
Assemble the Global Header
For each of the three menu designs, we will get began by the use of opening the Theme Builder from the Divi section of the WordPress Admin Panel. Select Add Global Header, then choose Assemble Global Header.
Insert a brand spanking new fullwidth section, then delete the empty commonplace section.
Next, insert the fullwidth menu module.
Upload your logo to the menu.
Now we’re able to build our design.
First Design
Our first design will incorporate Divi’s built-in hover effects to modify the color of the text and icons on hover. Let’s get started.
Get began by the use of opening the fullwidth menu settings and together with a background.
- Background: #fbf9f4
Navigate to the design tab and choose the inline focused logo structure.
- Style: Inline Centered Logo
Now let’s industry one of the vital menu text settings.
- Full of life Link Color: #09148c
- Menu Font: Rubik
- Menu Font Weight: Bold
- Menu Font Style: Capitalized and Underlined
Next, set the menu text colour, text dimension, and letter spacing.
- Menu Text Color: #000000
- Menu Text Size: 21px
- Menu Letter Spacing: 1px
We wish to add some hover effects to this menu, so choose the hover icon for the menu text colour. Set a distinct menu text colour on hover.
- Menu Text Color on Hover #b70018
Next, navigate to the dropdown menu settings beneath the Design tab.
- Dropdown Menu Background Color: #fbf9f4
- Dropdown Menu Line Color: #b70018
- Dropdown Menu Text Color: #000000
We want the dropdown menu text colour to modify on hover too, so choose the hover possible choices for this environment and set a distinct text colour on hover.
- Dropdown Menu Text Color on Hover: #b70018
- Dropdown Menu Full of life Link Color: #b70018
- Cellular Menu Background Color: #fbf9f4
- Cellular Menu Text Color: #000000
Once over again, we would really like the mobile menu text colour to modify on hover. Select the hover possible choices for this environment, then set a distinct text colour on hover.
- Cellular Menu Text Color on Hover: #b70018
Customizing the Cart and Search Icon
Now let’s add and customize the cart and search icons. Beneath the Content material subject material tab, navigate to Portions and make allowance the purchasing groceries cart icon and the hunt icon.
- Show Purchasing groceries Cart Icon: Positive
- Show Search Icon: Positive
Go back to the design tab and open the icon settings. Every of our icons will probably be black, and will probably be pink on hover. First, set the black colour.
- Purchasing groceries Cart Icon Color: #000000
- Search Icon Color: #000000
- Hamburger Menu Icon Color: #000000
Next, choose the hover icon and add the hover colour.
- Purchasing groceries 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.
- Purchasing groceries Cart Icon Font Size: 25px
- Search Icon Font Size: 25px
Navigate to the Spacing section, then set the easiest and bottom padding.
- Padding-Perfect: 5px
- Padding-Bottom: 5px
In the end, we’re going to add a border to the easiest and bottom of the menu module. Open the border settings.
- Perfect Border Width: 3px
- Bottom Border Width: 3px
Final Design
And that is our final design.
2nd Design
Our 2nd design will profit from Divi’s built-in hover effects to modify the dimensions 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 3 stops, the settings are as follows:
- First Save you: 0%, rgba(255,255,255,0)
- 2nd Save you: 23%, rgba(252,199,76,0.65)
- third Save you: 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 structure.
- Construction: Centered
Switch to the Menu Text section to customize the menu text design.
- Full of life 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 would really like our menu text dimension to increase on hover, choose the hover selection.
- Menu Text Size on Hover: 22px
Next, industry the Dropdown Menu design settings.
- Dropdown Menu Background Color: #fcda90
- Dropdown Menu Line Color: #FFFFFF
- Dropdown Menu Text Color: #FFFFFF
- Dropdown Menu Full of life Link Color: #FFFFFF
Set the background and text colour for the mobile menu.
- Cellular Menu Background Color: #fcda90
- Cellular Menu Text Color: #FFFFFF
Customizing the Cart and Search Icon
Now let’s get started customizing our menu icons. Navigate to Portions beneath the Content material subject material tab and make allowance the purchasing groceries cart icon and the hunt icon.
- Show Purchasing groceries Cart Icon: Positive
- Show Search Icon: Positive
Go back to the design tab and open the icon settings.
- Purchasing groceries Cart Icon Color: #000000
- Search Icon Color: #000000
- Hamburger Menu Icon Color: #000000
The icons could have a dismal orange colour on hover. Select the cover selection and set the color.
- Purchasing groceries Cart Icon Color on Hover: #fcac00
- Search Icon Color on Hover: #fcac00
- Hamburger Menu Icon Color on Hover: #fcac00
Next, set the font dimension for the cart and search icons.
- Purchasing groceries Cart Icon Font Size: 25px
- Search Icon Font Size: 25px
To set the icon dimension to increase on hover, choose the hover selection.
- Purchasing groceries Cart Icon Font Size on Hover: 30px
- Search Icon Font Size on Hover: 30px
In the end, switch to the Spacing section and set the easiest and bottom padding.
- Padding-Perfect: 5px
- Padding-Bottom: 5px
Final Design
That is the overall design for our 2nd menu structure.
third Design
For our final design, we will add a background circle at the back of the cart icons using custom designed CSS. Let’s get started.
First, add a background colour to the fullwidth menu module.
- Background: #efb6ac
Next, navigate to the Design tab and open the Menu Text possible choices.
- Full of life Link Color: #e84322
- Menu Font: Cinzel
- Menu Font Weight: Extraordinarily Bold
We want the menu text colour to modify on hover. First, set the menu text colour.
- Menu Text Color: #e7644a
Click on at the hover icon and set the hover text colour.
- Menu Text Color on Hover: #e84322
Next, set the menu text dimension and letter spacing.
- Menu Text Size: 21px
- Menu Letter Spacing: 1px
We moreover want the letter spacing to increase on hover, so choose the hover selection for the environment.
- Menu Letter Spacing on Hover: 2px
Set the text alignment to left.
- Text Alignment: Left
Next, industry 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 Full of life Link Color: #e84322
Set the background and text colour for the mobile menu.
- Cellular Menu Background Color: #efb6ac
- Cellular Menu Text Color: #e7644a
- Cellular Menu Text Color on Hover: #e84322
Customizing the Cart and Search Icon
First, navigate to Portions beneath the Content material subject material tab and make allowance the purchasing groceries cart icon and the hunt icon.
- Show Purchasing groceries Cart Icon: Positive
- Show Search Icon: Positive
Next, go back to the design tab and open the icon settings. Set the icon colour.
- Purchasing groceries Cart Icon Color: #e7644a
- Search Icon Color: #e7644a
- Hamburger Menu Icon Color: #e7644a
The color of the ones icons will industry on hover. Allow the hover possible choices and set the color.
- Purchasing groceries Cart Icon Color on Hover: #e84322
- Search Icon Color on Hover: #e84322
- Hamburger Menu Icon Color on Hover: #e84322
We moreover want the icon dimension to increase on hover. First, set the icon font dimension.
- Purchasing groceries Cart Icon Font Size: 22px
- Search Icon Font Size: 22px
Then, set the icon font dimension on hover.
- Purchasing groceries Cart Icon Font Size on Hover: 26px
- Search Icon Font Size on Hover: 26px
Next, navigate to the Spacing section and add best and bottom padding.
- Padding-Perfect: 5px
- Padding-Bottom: 5px
In the end, we can add some custom designed CSS to the global header to be able to upload the circles at the back of the cart and search icon. You’ll be capable of customize this CSS on the other hand you want to have compatibility the design of your menu module.
Open the Header Template Settings, then navigate to the Advanced tab and insert the following custom designed 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 supreme menu structure.
Final Result
Now let’s take a look at the overall design for the three menu modules.
First Design
2nd Design
third Design
Final Concepts
Divi’s menu module and cart and search icons are easy to customize with the intention to create unique layouts and designs for your web page. You’ll be capable of merely elevate the look of your menu modules using built-in Divi settings like hover effects and custom designed CSS. Hopefully this tutorial has given you some design inspiration you’ll put into effect to your private web page as successfully! How have you ever ever customized the look of your menu module and icons? Let us know inside the comments!
The post Methods to Taste the Cart & Seek Icons in Your Divi Fullwidth Menu Module seemed first on Chic Subject matters Weblog.
0 Comments