Styling Divi’s Fullscreen Menu

Last Updated on September 20, 2022 by 36 Comments

Styling Divi’s Fullscreen Menu
Blog / Divi Resources / Styling Divi’s Fullscreen Menu
Play Button

Divi and its 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:

fullscreen menu

Here is a sneak peek of the new design:

fullscreen menu

Styling Divi’s Fullscreen Menu

Subscribe To Our Youtube Channel

Getting Started

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.

fullscreen menu

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

fullscreen menu

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]

fullscreen menu

Once everything is setup, this is what the default layout should look like:

fullscreen menu

Now let’s add some custom CSS.

Adding Custom CSS

Adding custom CSS in Divi can be done in a few places. Since we are already using the theme customizer, go to Additional CSS. This is where we will be adding our CSS. Of course if you rather add it to your external style.css file in your child theme, go for it.

For those of you pressed for time you can skip down to the completed version of the CSS code that you can copy and paste into your Additional CSS section. Just know that you will still need to go back and add a few elements like the background image to your code.

Now back to adding our CSS.

Since most of the custom CSS is only going to apply to the desktop version of the fullscreen header, we are going to start by adding a media query that targets screen sizes with a minimum width of 980px. Add the following in the Additional CSS section:

@media all and (min-width: 980px){

}

Now let’s change the layout of the fullscreen header a bit by adjusting the position of the navigation menu and the top bar elements so that the navigation will be on the left of the screen and the top bar elements will be stacked vertical on the right of the screen. To make this change, add the following css inside the media query brackets.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

fullscreen menu

Next, let’s increase the size of our search bar with the following CSS:


/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

And let’s add the following CSS to make the menu right aligned:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Then let’s make the close menu icon in the top right corner bigger and easier to click:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Let’s also take out the background overlay behind the top menu elements and take out the opacity for the background.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

If you have sub menu items, this CSS makes the drop down arrow to the right of the menu item bigger:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Let’s check out what we have so far:

fullscreen menu

Now we are ready to add our background image. Since I want my background image to show on all devices, I’m going to add this CSS outside the media query brackets so that the background doesn’t get hidden on screen sizes with a width less than 980px.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

If you don’t already have a background image URL, upload a background image (1920×1080) to the WordPress media gallery and copy the URL.

fullscreen menu

Now replace the text that reads “INSERT IMAGE URL” by pasting your image URL in the code.

Now you are done!

Here is a completed version of the CSS code that you should have added to your Additional CSS (except for the image URL that you need to provide):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Click Save & Publish

Now Let’s check it out:

fullscreen menu

Alternative grid menu layout

To add a grid layout for your menu, add the following CSS below your current code and within the media query brackets:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

fullscreen menu

Important Note: You may need to change the menu font size to 30px (or close to that) to make sure your menu items don’t overlap on smaller screen sizes. Also, this layout will not work if your menu has sub menu items.

Sub Menu Items on Full Screen Header

Keep in mind that if you have sub menu items, the parent menu item will only function as a toggle link to show and hide the sub menu item(s). It will not work as a menu link itself.

Responsive?

This cutomization is responsive and works well on all screen sizes.

The fullscreen header is built with two adjacent table cells that are vertcially aligned. The left table cell contains the menu and the right cell contains the other header elements. Because the content is vertically aligned and the table cells will each occupy 50% (one half) of the screen size at all times, the content will always adjust nicely to any screen size.

If the screen size is less than 980px (tablets and phones), the default Divi layout will kick in and display the menu nicely on mobile.

Final Thoughts

If you are thinking about adding a fullscreen header on your site, I hope this design will be useful inspiration. The symmetry of the header elements and menu items balances things out and brings more attention to the contact information which is important for a lot of clients.

Keep in mind that because this menu is fullscreen, the background image is going to be key. You don’t want an image that will distract from or drown out the important contents of the menu. If you can’t find the perfect image that brings the personality you want, go for an image that simply looks great as a background and is consisent with your design. Or you can simply use the default background color option.

Well, that’s all I have.

Looking forward to hearing from you in the comments.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Estheticians (Quick Install)

New Starter Site for Estheticians (Quick Install)

Posted on November 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 3

Divi 5 Update: Public Alpha Version 3

Posted on November 11, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 3 today. Thanks...

View Full Post

36 Comments

  1. Thank you very much for all your work! Can you please suggest how can I add a change of the menu text color on hover, make a logo stay in a left corner when the full screen menu opened, and on mobile the menu to stick to the top of the page? Thank you

  2. Hi, If a design has a secondary menu built is it possible it can be shown on this layout as well as the primary menu? or can it be set as along the top of the site and the primary menu in this view? if so, how please, thanks

  3. how do i increase menu text line height and also how do i configure which menu i want to show here?

    • It’s using the default header so whichever menu you will set as primary is what will show.

  4. excellent post, really everything is very useful, I would like to know how to do that instead of leaving the network icons and the search icon, a small review, or include text or an image … thank you very much

  5. Hi,

    very interesting to read. But how can I reach that I have not the Hamburger Symbol in the right corner. I will have there the word “MENU”.

    Kind regards Frank

  6. Brilliant thank you! Does anyone have any tips on how to keep the top bar displayed at the top when using the full screen menu? As it is when using the default menu

  7. Thank you very much for your contribution, I was very much served right now that I am doing a job with the menu in full screen. My only observation is if you could lower the tonality of the image automatically with a code or would it have to upload if or if an image with a darker layer? Once again, thank you so much
    Mariela

  8. Hello Elegant Themes!

    Thank you for all the wonderful new features to the Divi them! I have one question . . . My client want the search icon displayed to the left of the mobile menu and a breadcrumb (18pt) below (see https://www.screencast.com/t/3CChqpglU). Is there a way to do this?

    Much Thanks!

  9. Hello guys.

    Is there a way to disable the menu version the menu is too big on mobile.

    Great blog post btw.

    I love hoe it looks on Desktop

    Many thanks and regards

    • Mike,

      Did you wrap your CSS in the media query…

      @media all and (min-width: 980px){
      
      }
      
      

      This makes sure your style only applies to the desktop version. It should fall back to the regular mobile menu style on mobile devices.

      Thanks.

      • I don’t know if this is what Mike meant, but I implimented the changes (LOVE them by the way) Even before I added the CSS, when I looked at it on a phone, the menu text was too big. It looked like the menu text of 46 carried over to the phone menu. Since my menu items are 3 words, the 3rd word created a second line. Since the text is so large, the 2 lines mesh into each other. Is there some custom css to change the menu font just on phone size mobile devices?

  10. Hello Team

    Thank you for this blog post. Very nice.

    I was wondering is there a way to increase the size of the burger menu?

    Regards

    Mike

    • I mean the burger menu icon

      • Yes Mike. Go ahead and try adding this to your Additional CSS.

        .mobile_menu_bar:before {
        font-size: 50px;
        }
        

        Basically, you can change the font size to whatever size your want.

        Let me know how it goes.

  11. Wow looking very nice..

  12. Hi Jason,
    My social icons are lining up on the left rather than above search as shown in your example, any idea what I am doing wrong.
    Thanks

    • Not sure Alan. Maybe send me a link to your site or ask customer support?

  13. Sweet, I’ll mos def try that out. Thanks!

  14. Looking nice! Great visual! Thanks!

  15. Is there a live demo of this please?

    • Sorry Neil. We don’t normally setup live demos.

  16. Looks awesome, and thank you for this tutorial 🙂
    Could you make on how to style the default mobile menu also, maybe using off-canvas.
    I would also like to know, how to have a normal menu: HOME ABOUT SERVICES ETC on desktop, and when using tablet/mobile this menu layout from this blog post.
    How would I do this in Divi.
    Thanks.

    • what if i want the submenu parent to open as a separate page(link)

    • Great ideas Kent. I shall see what I can do. Although I don’t think this layout would work well on mobile devices. I don’t think there would be enough space.

  17. Jason, thank you for your walk through. I will definitely have to try a full page menu after seeing yours. Keep up the good articles.

    • Thanks Paul. Enjoy!

  18. Very nice for a visual builder theme 🙁

  19. Thanks! Great timing, styling a fullscreen menu is exactly what I’m working on today.

    I do wish that different menu styles could be selected for mobile vs desktop. (Ex. Default for desktop, slide in or full screen for mobile)

    At any rate, I really appreciate this.

    • That’s a good point. I will keep that in mind. Thanks!

      • I would really like that too. Default menu for desktop, fullscreen for mobile. Is there a work around to do that allready?

  20. Very nice. But would be better if you can implement it into the standard theme options instead of having to do so much css.

    • Thanks Leon. Our goal is to keep improving the theme builder to include more advanced options. Hopefully these kind of posts will help those who are needing/wanting to learn how to use CSS to expand certain elements until those more advanced features are added to the Divi Builder.

      • Love it! – Thanks for making Divi so versatile!

  21. Thank you for posting this tutorial on the menu. Super helpful. I was wondering too along with this… Is there a way to make the hamburger a little bigger? I was interested in using the hamburger as the main menu on the website as well as with mobile. The current design idea is to use a video loop in the first section of the site and have the hamburger upper right corner. Just want to make it a little bigger for desktop viewing people. Thanks.

    • Try this Ace…

      .mobile_menu_bar:before {
      font-size: 50px;
      }
      

      Then adjust the font size to whatever you want.

      Thanks.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today