Divi’s fullscreen menu presents a great opportunity for custom design. Unlike the other four header styles available in Divi’s Theme Customizer, the fullscreen menu fills the entire screen when active. This makes room for a creative layout for Divi’s menu and header elements.
In today’s post, I’m going to show you how to style your fullscreen menu to give it a more custom feel for your visitors. To accomplish this I will be changing a few options in the theme customizer and adding some custom CSS.
Let’s get started.
The Before and After
This is what the fullwidth menu looks like by default:
Here is a sneak peek of the new design:
Implementing the Design with Divi
Before we get started on design, make sure that you have an active primary menu with menu items already added.
Update settings in the theme customizer
From your WordPress Dashboard, go to Divi > Theme Customizer > Header & Navigation > Header Format. Then select Fullscreen as the Header Style.
Once the Fullscreen Header style is set, go back to Header & Navigation. Now you will see a new set of options called “Slide In & Fullscreen Header Settings”.
Update the Slide In & Fullscreen Header Settings as follows:
Check the Show Top Bar Option
Menu Text Size: 46px
Top Bar Text Size: 24px
Font: Playfair Display
Font Style: Bold(B)
Menu Link Color: #ffffff
Active Link Color: #edef86
Top Bar Text Color: #ffffff
Now go back to Header & Navigation settings and click Header Elements. Under Header Elements, update the following:
Select Show Social Icons
Select Show Search Icon
Phone Number: [enter number] Email: [enter email]
Once everything is setup, this is what the default layout should look like: