Customizing The Header & Navigation Of Your Theme
To begin customizing your website's Header and Navigation, you must first enter the Theme Customizer by clicking on the Divi → Theme Customizer link within your WordPress Dashboard.
Next, look for the Header & Navigation panel and click on it to open up the relevant settings and begin customizing.
Header Format
Here, you can adjust your header's general format, such as switching between the main layout modes:
Default,
Centered: place your logo above your navigation menu and center both within the header
Centered Inline Logo: place the logo in line with your nav menu elements, centered between the links
Slide-in: The header layout will become vertical, and it will slide in from the left side of the screen
Fullscreen: Header layout will be displayed full screen.
Primary Menu Bar
In this menu, you can adjust the size, style and color of your primary navigation menu. The large white bar at the top of your page contains your logo and primary menu links.
Within this panel, you can do many things very easily, such as adjust the height of your logo, the background color of the menu bar and the color of your links.
Make Full Width: This extends the menu to the full width of the browser window.
Hide Logo Image: If you want, you can completely hide the logo from your menu here.
Menu Height: Change the menu height to whatever you want. However, be careful to make your menu height manageable since you could waste valuable real estate on a menu instead of your homepage content.
Logo Max Height: Increase or decrease the max width percentage of your logo to make it bigger or smaller.
Text Size, Letter Spacing, Font, Font Style, Text Color, Active Link Color: These options allow you to customize the menu links.
Background Color: This allows you to change the background color of your primary menu.
Dropdown Menu Settings: The dropdown menu doesn’t have to inherit the style of the main menu. Here, you can create a unique design for your dropdown menu. You can even add custom animation when displaying the dropdown menu.
Secondary Menu Bar
The secondary menu bar is the smaller of the two navigation bars that appear above your main navigation bar.
This menu will only appear if you have assigned a menu to the secondary menu location. Once enabled, a smaller blue menu bar will appear. This panel allows you to customize that menu bar and its text, adjusting the background color, text color and text styles.
Fixed Navigation
The fixed navigation bar refers to the navigation bar as it becomes fixed to the top of your screen when you scroll.
You will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space.
All of this is customizable from within the Fixed Navigation panel. You can adjust the menu height if you think it shrinks too small, and you can adjust the colors of the menu and the menu links independently from the menu's non-fixed state.
Note: Ensure that in Divi → Theme Options → General Tab, the option called Fixed Navigation is enabled.
Header Elements
Header elements are optional items in your navigation bar, which can be toggled on and off here, such as your social follow icons, the search icon, phone number and email address.
