Divi comes with some great options for customizing your header and navigation area.
Using various combinations of these settings can yield some unique results, allowing you to create many different kinds of websites.
All of these options are found in the theme customizer.
To load the Theme Customizer, follow these steps:
Go to WordPress Dashboard → Appearances → Customize link or go to WordPress Dashboard → Divi → Theme Customizer.
Header and Navigation Settings
Header Format
Header Style: You can choose between several header styles:
Default: The logo will be aligned to the left, and your menu will be aligned to the right.
Centered: Center both the logo and the menu, placing the logo on top
Centered Inline Logo: The logo and menu items will be added to the same line with your logo placed directly in the center.
Slide In: Create a hamburger menu icon in the top right-hand corner of the page. When clicked, that menu slides in from the right
Fullscreen: Create a hamburger icon in the top right-hand corner. When clicked, a fullscreen overlay menu will appear.
Enable Vertical Navigation: The vertical navigation settings will change the orientation of our header and navigation bars. You can choose to place the header:
On the top,
On the side of your page.
Enabling the Vertical Navigation setting will change your header to the vertical style, displaying your logo and menu to the left of the page.
Hide Navigation Until Scroll: The Hide Navigation Until Scroll setting makes it so that your primary and secondary navigation bars will be invisible until a user begins to scroll down the page.
Primary and Secondary Menu Bar Settings
Here, you can style your Primary and/or Secondary menu bars.
These settings include options for menu height, text size and color, background color, and many others.
To activate your secondary menu, enter a phone number and/or email address under Theme Customizer → Header & Navigation → Header Elements.
If you want to include your menu in the secondary menu bar, select it under Theme Customizer → Menus → Menu Locations.
Fixed Navigation Settings
If the Fixed Navigation option is enabled in Divi → Theme Options → General Tab, when scrolling down the page, your navigation bar remains fixed at the top of your screen. This is referred to as your fixed navigation bar.
You can style the fixed navigation bar using these settings.
Header Elements
Show Social Icons: If you have defined social profiles, you can display these in your header. This option will toggle the social icons on and off. Social icons, when enabled, will appear in the secondary navigation area.
Show Search Icon: You can also toggle the search icon on and off. If you prefer to avoid allowing visitors to search your website or are simply trying to reduce clutter in your header, then the search icon can be turned off using this setting.
Phone Number: Within the header, you can place contact information. Filling out the phone number field will display the defined phone number inside the secondary navigation bar.
Email: Within the header, you can place contact information. Filling out the Email field will display the defined email address inside the secondary navigation bar.