The header is among the maximum necessary components of any website online and is central to the person enjoy. The navigation menu provides your customers an concept of what they may be able to look forward to finding for your website online and is helping them find the guidelines they want. Moreover, a secondary menu bar is usually a tremendous area to spotlight a call-to-action or to advertise an be offering. To not point out, the header is among the maximum distinguished portions of your website online as it usually seems on each unmarried web page. This can be a tremendous alternative to show off your branding and create a header this is cohesive with the design of the remainder of your website online.

Divi’s Theme Builder choices can help you create a customized world header and customise the glance of your header and menu modules throughout all your website online. On this instructional, we will be able to display you how one can construct an international header the usage of Divi’s fullwidth menu module.

Let’s get began!

Sneak Peek

Here’s a preview of the worldwide header we will be able to design.

What You Wish to Get Began

Ahead of we start, install and activate the Divi Theme and you should definitely have the most recent model of Divi for your website online.
Now, you’re ready to begin!

The right way to Construct a World Header with Divi’s Fullwidth Menu Module

Open the Theme Builder

Since we’re development an international header on this instance, let’s navigate to the theme builder, which you’ll be able to to find underneath the Divi menu in WordPress. Choose Upload World Header, then make a choice Construct World Header.

Create the Secondary Menu Bar

While you first open the worldwide header structure, it’ll come preloaded with a typical phase. We will be able to alter this to be our secondary menu bar, which is able to sit down above our fullwidth menu and come with some call-to-action textual content and a button.
First, open the phase settings and upload the background colour.

• Background: #92a8a1

Subsequent, take away the padding from the phase.

• Padding-top: 0px
• Padding-bottom: 0px

Now insert the row. For this design, we will be able to use the row structure proven underneath.

Within the row settings underneath Sizing, equalize the column heights.

• Equalize Column Heights: Sure

Subsequent, set the highest and backside padding.

• Padding-top: 5px
• Padding-bottom: 5px

We wish the goods in our secondary header to be vertically aligned, so let’s upload some customized CSS to the row’s primary part.

align-items:middle;

Now our row is about up and we will be able to upload the modules for our content material. Insert a textual content module at the left facet.

Adjust the textual content content material. This can be a great spot to incorporate a CTA (call-to-action) or to advertise an be offering.

• Textual content: “Join our mailing record to obtain 10% off your order!”

Navigate to the design tab of the textual content module and set the textual content font, weight, and colour.

• Textual content Font: Poppins
• Textual content Font Weight: Medium
• Textual content Colour: #FFFFFF

Subsequent, upload the button module to the appropriate.

Upload the button textual content,

• Textual content: “Get a Loose Quote”

Below the design tab, set the button alignment to middle.

• Button Alignment: Middle

Now we will be able to customise the glance of the button.

• Customized Kinds for Button: Sure
• Button Textual content Dimension: 14px
• Button Textual content Colour: #FFFFFF
• Button Background: #2F5349

• Button Border Width: 0px
• Button Border Radius: 50px
• Button Letter Spacing: 1px
• Button Font: Poppins

Upload the Fullwidth Menu Module

Now that the secondary menu is designed, we will be able to transfer directly to the main menu. We will be able to be development the menu the usage of the fullwidth menu module. Upload a brand new fullwidth phase to the worldwide header.

Choose and insert the Fullwidth Menu module.

Subsequent, we will be able to customise the fullwidth menu settings.

• Lively Hyperlink Colour: #2f5349
• Menu Font: Poppins
• Menu Font Weight: Semi Daring
• Menu Font Taste: Capitalized (TT)
• Menu Textual content Colour: #000000

• Menu Textual content Colour on Hover: #2f5349
• Menu Textual content Dimension: 15px
• Menu Letter Spacing: 2px

Subsequent, edit the dropdown menu choices.

• Dropdown Menu Line Colour: #2f5349
• Dropdown Menu Lively Hyperlink Colour: #2f5349
• Cellular Menu Background Colour: #FFFFFF

Trade the hamburger menu icon colour to black.

• Hamburger Menu Icon Colour: #000000

Ahead of we upload the brand to our menu, let’s alter the sizing choices. We will be able to use Divi’s integrated responsive choices to set a distinct Max Top for desktop and cell.

• Emblem Max Top on Desktop: 3vw

• Emblem Max Top on Cellular: 6vw

Now upload your emblem to the fullwidth menu.

In spite of everything, we wish the main menu to keep on with the highest of the display screen because the person scrolls in the course of the website online, so we’ll use Divi’s integrated sticky settings for this.

• Sticky Place: Stick with Best

With that, the design of our world header is entire!

Create a New Web page with a Premade Format

To peer the header and fullwidth menu in motion, let’s create a brand new web page with a premade structure from the Divi library. For this design, we will be able to use the Ground House Web page from the flooring layout pack.

Upload a brand new web page for your website online and provides it a identify, then make a choice the method to Use Divi Builder.

We’re the usage of a premade structure from the Divi library for this situation, so make a choice Browse Layouts.

Seek for and make a choice the Ground House Web page structure.

Choose Use This Format so as to add the structure for your web page.

Now the design is entire!

Ultimate Outcome

Let’s check out the general design for our world header.

Ultimate Ideas

As now we have mentioned, the header and navigation menu is central to the person enjoy of your website online. Now you will have noticed how simple it’s to design a great-looking world header with Divi’s fullwidth menu module. Fortunately, Divi’s theme builder will provide you with keep watch over over each facet of your website online’s menu and header, and you’ll be able to create completely customized and distinctive designs with only some clicks. If you have an interest in additional header tutorials, take a look at this choice of 30+ Helpful Divi Header Tutorials!

Have you ever used Divi’s world header choices to customise your header and navigation menu? We would really like to listen to your ideas within the feedback!

The submit How to Build a Global Header with Divi’s Fullwidth Menu Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more