Styling Divi’s Fullscreen Menu

Posted on September 4, 2017 by in Divi Resources | 27 comments

Styling Divi’s Fullscreen Menu

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:

fullscreen menu

Here is a sneak peek of the new design:

fullscreen menu

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.

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.

27 Comments

  1. 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.

    • Jason Champagne

      Try this Ace…

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

      Then adjust the font size to whatever you want.

      Thanks.

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

    • Jason Champagne

      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!

  3. 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.

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

  4. Very nice for a visual builder theme 🙁

  5. 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.

  6. 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.

    • Jason Champagne

      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.

  7. Is there a live demo of this please?

  8. Looking nice! Great visual! Thanks!

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

  10. 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

    • Jason Champagne

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

  11. Wow looking very nice..

  12. 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

      • Jason Champagne

        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.

  13. 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

    • Jason Champagne

      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?

  14. 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!

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest