Navigation is a crucial a part of the person enjoy in your web page. It’s vital to ensure your guests can navigate seamlessly thru your web page with no need to compromise on aesthetics. By means of default, the WordPress Number one Menu Bar is positioned on the height of each and every web page and is thought of as become independent from the web page design you select to apply. In lots of circumstances, even though, together with your menu within the general web page design can carry shocking effects. It’ll give your web page a extra coherent feel and look.
On this publish, we’re going to turn you come with the principle menu bar on your Divi web page design. It is a easy however dynamic alternate to the best way the principle menu is generally displayed, bringing a novel glance to any Divi undertaking.
Let’s get to it!
Preview
Let’s get started off via looking on the finish consequence on other display sizes:
Theme Customizer Settings
Move to the Theme Customizer
Earlier than we begin development our design, let’s get started off with some Theme Customizer adjustments. Move on your WordPress Dashboard > Look > Customise.
Save Background Symbol
Since we’re going to detach the Number one Menu Bar from the highest, we’ll want one thing to hide the gap it in most cases takes up. We’ll use the next background symbol so cross forward and reserve it in your laptop:
Add Background Symbol to Common Settings
Then, cross to Common Settings > Background and add the picture on your web page’s background.
- Strech Background Symbol: Enabled
- Background Place: Fastened
Number one Menu Bar Settings
We’re additionally going to merge the Number one Menu Bar in a position with our Divi design. To try this, we’ll want to alter the Number one Menu Bar settings first. Move to Header & Navigation > Number one Menu Bar and use the next settings:
- Emblem Max Top: 100
- Textual content Dimension: 18
- Letter Spacing: -1
- Font: Poppins
- Textual content Colour: #333333
- Energetic Hyperlink Colour: #f55c83
- Background Colour: rgba(255,255,255,0)
- Dropdown Menu Background Colour: #FFFFFF
Upload a New Web page
Web page Customized CSS
To make the principle menu bar overlap our web page design, we’ll want a bit of of CSS code. You’ll be able to make a selection whether or not you need to make the overlap observe on all of your web page or only a web page specifically. If you select so as to add it to at least one web page simplest, upload the next CSS code on your web page settings:
#main-header {
margin-top: 140px;
}
Upload New Segment
Background Colour
Let’s get began with the design! Upload a brand new web page, transfer over to Visible Builder and upload your first phase. Open the phase settings subsequent and upload ‘rgba(255,255,255,0.81)’ because the background colour. This will likely permit our web page background symbol to turn thru.
Spacing
Proceed via going to the Spacing settings and addthe following customized margin and padding:
- Most sensible & Backside Margin: 100px
- Left & Proper Margin: 60px
- Most sensible Padding: 135px
- Backside Padding: 0px
Rounded Corners
Upload ’30px’ to each and every one of the vital corners of your phase as smartly.
Border
Then, upload a height border on your phase:
- Most sensible Border Width: 35px
- Most sensible Border Colour: #333333
Field Shadow
To complete off, upload an excessively delicate field shadow.
- Field Shadow Blur Power: 61px
- Field Shadow Unfold Power: -13px
Upload Row #1
Column Construction
Time to begin including rows and modules! Upload your first row the usage of two equally-sized columns.
Sizing
With out including any modules but, open the row settings and alter the Sizing settings:
- Make This Row Fullwidth: Sure
- Equalize Column Heights: Sure
Spacing
Upload some customized padding subsequent:
- Most sensible Padding: 250px (Desktop), 50px (Pill & Telephone)
- Backside Padding: 200px (Desktop), 100px (Pill), 50px (Telephone)
- Column 1 Left Padding: 50px (Desktop), 0px (Pill & Telephone)
Upload Name Textual content Module to Column 1
H1 Textual content Settings
We will now get started including the modules. We’ll get started with the primary column via including a brand new identify Textual content Module.
- Heading Font: Poppins
- Heading Font Weight: Medium
- Heading Textual content Dimension: 120px (Desktop), 80px (Pill), 58px (Telephone)
Upload Other Colour to A part of Replica
You’ll be able to simply alternate the colour of a phrase on your identify via switching over to the Textual content tab and including a colour on your phrase of selection via the usage of span tags.
Upload Description Textual content Module to Column 1
Textual content Settings
Proper under the former Textual content Module, cross forward and upload an outline Textual content Module the usage of the next textual content settings:
- Textual content Font: Poppins
- Textual content Font Weight: Common
- Textual content Dimension: 20px (Desktop), 15px (Pill & Telephone)
- Textual content Line Top: 2em
Spacing
We’ll want some additional margin for this Textual content Module:
- Most sensible & Backside Margin: 50px
Upload Button Module to Column 1
Button Settings
The final module on this column is a Button Module. After you’ve added the CTA replica, alternate the button kinds:
- Use Customized Kinds for Button: Sure
- Button Textual content Colour: #FFFFFF
- Gradient Colour 1: #f45085
- Gradient Colour 2: #f88c7e
- Gradient Path: 137deg
- Button Border Width: 0px
- Button Border Radius: 40px
- Button Font: Poppins
- Button Font Weight: Common
- Font Taste: Uppercase
Spacing
Open the Spacing settings subsequent and upload some margin and padding on your button:
- Backside Margin: 100px (Desktop), 20px (Pill & Telephone)
- Most sensible & Backside Padding: 15px
- Left & Proper Padding: 50px
Field Shadow
Ultimate however no longer least, we’ll use an excessively delicate field shadow to create extra intensity on our web page:
- Field Shadow Blur Power: 55px
- Field Shadow Unfold Power: -4px
- Shadow Colour: rgba(84,84,84,0.25)
Upload Symbol Module to Column 2
Save & Add Symbol
The second one column simplest comprises an Symbol Module. We’re the usage of a mockup that is a part of Divi’s Digital Marketing Layout Pack. Move forward and save the picture under on your laptop. After you accomplish that, upload it to the Symbol Module on your 2nd column.
Upload Row #2
Column Construction
Time so as to add the second one row! Make a selection the next column construction for it:
Column 1 Background Colour
Then, open the row settings and upload ‘#FFFFFF’ because the Column 1 Background Colour.
Replica Button Gradient Background
We’re going to avoid wasting ourselves a while and replica the gradient we’ve already used for the Button Module. To try this, open the Button Module, cross to the button settings, right-click the gradient background and replica it.
Paste Gradient Background in Column 2
Then, return on your row settings and paste the gradient background in the second one column.
Column 3 Background Colour
For the 3rd column, we’re the usage of the ‘#FFFFFF’ background colour.
Sizing
Move to the Sizing settings subsequent and alter the settings:
- Use Customized Width: Sure
- Customized Width: 2600px
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
We’ll want some additional padding as smartly:
- Most sensible & Backside Padding: 0px
- Column Most sensible & Backside Padding: 30px
Field Shadow
Ultimate however no longer least, we’ll use a delicate field shadow:
- Field Shadow Blur Power: 61px
- Field Shadow Unfold Power: -20px
Upload Blurb Module #1
Make a selection Icon
We’ll want 3 Blurb Modules in general. We’ll get started off with one and clone it afterwards to avoid wasting time. Move forward and upload a brand new Blurb Module to the primary column. After including your content material, make a selection an icon of selection.
Icon Settings
Trade the settings of your icon accordingly:
- Icon Colour: #f55c83
- Icon Placement: Left
- Use Icon Font Dimension: Sure
- Icon Font Dimension: 88px (Desktop & Pill), 50px (Telephone)
Name Textual content Settings
Open the identify textual content settings subsequent and make some adjustments:
- Name Font: Poppins
- Name Font Weight: Medium
- Name Textual content Dimension: 34px (Desktop & Pill), 23px (Telephone)
Frame Textual content Settings
The frame textual content must be changed as smartly:
- Frame Font: Poppins
- Frame Font Weight: Common
- Frame Textual content Dimension: 16px (Desktop), 14px (Pill & Telephone)
- Frame Line Top: 2em
Spacing
And to create a extra aesthetically interesting design, upload some padding:
- Most sensible Padding & Backside Padding: 100px
- Left & Proper Padding: 50px (Desktop & Pill), 10px (Telephone)
Clone Blurb Module Two times and Position in Closing Columns
Move forward and clone your Blurb Modules two times. After you accomplish that, position them in the rest columns.
Trade Blurb Module in Column 2
Trade Icon Colour
The 3rd Blurb Modules doesn’t want any adjustments, the second alternatively does. Get started via converting the Icon Colour into white.
Trade Textual content Colour
Open the Textual content Settings subsequent and alter the Textual content Colour to ‘Gentle’.
Disable Fastened Navigation
To ensure the Number one Menu Bar assists in keeping its position inside the design, we’ll want to disable the Fastened Navigation Bar as smartly. To try this, cross on your WordPress Dashboard > Divi > Theme Choices > Disable the ‘Fastened Navigation Bar’ possibility and save the settings.
Preview
Now that we’ve long past thru the entire steps, let’s take a last have a look at the outcome on other display sizes:
Ultimate Ideas
On this publish, we’ve proven you creatively come with the principle menu bar on your general Divi web page design. This manner will mean you can create a extra coherent feel and look in your web page. We’ve created an instance from scratch as smartly. In case you have any questions or tips, you’ll want to go away a remark within the remark phase under!
The publish How to Include the Primary Menu Bar in Your Divi Page Design seemed first on Elegant Themes Blog.
WordPress Web Design