Here’s a cool way of making the full screen menu much much much cooler. With a custom section!

You can pretty much make your own screen.

Here’s what it will look like:


So this one’s fun.

The video


You’ll need to gather the following ingredients.

What you need

1. Child theme. Get them here.
2. A better full screen menu. Get that here.
3. A way to convert Divi sections to shortcodes. You can get the code here.

(additional note: If you want to make your own child theme, use this plugin: )

The next step: making the layout

Once you’ve done the above, now you can really get into it.

This is the fun part.

Make your own global section in the Divi library.

Do whatever you want with it.

Save it, and go back to the library page, and you’ll see a shortcode for the section you just made.


edit the header

Around line 184, you’ll see this:

<div class="et_pb_fullscreen_nav_container">
	$slide_nav = '';
	$slide_menu_class = 'et_mobile_menu';

	$slide_nav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'echo' => false, 'items_wrap' => '%3$s' ) );
	$slide_nav .= wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container' => '', 'fallback_cb' => '', 'echo' => false, 'items_wrap' => '%3$s' ) );

<ul id="mobile_menu_slide" class="<?php echo esc_attr( $slide_menu_class ); ?>">

	if ( '' == $slide_nav ) :
		<?php if ( 'on' == et_get_option( 'divi_home_link' ) ) { ?>
			<li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'Divi' ); ?></a></li>
		<?php }; ?>

		<?php show_page_menu( $slide_menu_class, false, false ); ?>
		<?php show_categories_menu( $slide_menu_class, false ); ?>
	else :
		echo( $slide_nav );


Delete everything from the opening php tag to the ul closing. So it’ll look like this:

<div class="et_pb_fullscreen_nav_container">


Then add the new shortcode so it’ll look like this:

<div class="et_pb_fullscreen_nav_container">
		echo do_shortcode('[ai_layout_sc id="58"]');

(note: the id number inside the shortcode will be different because it’s your own section.)

… and…

You’re done! woot!


Hey, you wanna learn more about mobile responsiveness?

Click me to check out a cool course on how to make Divi more responsive

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive


Note: To take out the search bar on top of the full screen menu, check here:

About 10 lines starting from line 151, you’ll find:

<form role="search" method="get" class="et-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		printf( '<input type="search" class="et-search-field" placeholder="%1$s" value="%2$s" name="s" title="%3$s" />',
			esc_attr__( 'Search &hellip;', 'Divi' ),
			esc_attr__( 'Search for:', 'Divi' )
	<button type="submit" id="searchsubmit_header"></button>

Take that part out, and you’re done.


To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi



Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!


Photo by Manu Franco on Unsplash