Snippets: Custom Fixed Bottom Mobile Menu

An example of how you could insert a custom mobile menu that is fixed at the bottom of your site. Now, in order for this to work you still need to have the default mobile menu style enabled for your header so that the actual toggle works. It's also recommended that you use either the "sidebar" or "overlay" mobile menus, the "toggle" style won't work because this is attached to the site header.

Important: The snippet is split into 2 parts, the PHP and the CSS code so be sure to place each sample in it's correct location.

/**** PHP CODE BELOW TO GO IN YOUR CHILD THEME'S FUNCTIONS.PHP FILE ****/

// Remove default mobile menu toggle from menu
add_action( 'init', function() {
	remove_action( 'wpex_hook_header_inner', 'wpex_mobile_menu_icons' );
} );

// Add new bottom mobile menu
add_action( 'wp_footer', function() { ?>

	<div class="my-fixed-bottom-mobile-menu show-at-mm-breakpoint">

		<div class="container clr">

			<div class="my-fbmm-toggle"><a href="#open-mobile-menu" class="mobile-menu-toggle"><span class="ticon ticon-bars"></span></a></div>

			<div class="my-fbmm-logo">Maybe add a logo</div>

			<!-- Search toggle, only use if using the overlay style search because otherwise it will trigger the search dropdown in the header which would be weird -->
			<div class="my-fbmm-search"><a href="#open-search" class="search-overlay-toggle"><span class="ticon ticon-search"></span></a></div>

		</div>

	</div>

<?php } );

/**** CSS CODE BELOW TO GO IN YOUR CHILD THEME'S STYLE.CSS FILE ****/
.my-fixed-bottom-mobile-menu { background: #000; position: fixed; bottom: 0; left: 0; width: 100%; color: #fff; font-size: 16px; text-align: center; height: 50px; z-index: 9999; }
.my-fixed-bottom-mobile-menu a { color: #fff; }
.my-fixed-bottom-mobile-menu .container { display: flex; }
.my-fixed-bottom-mobile-menu .container > div { flex-grow: 1; flex-basis: 0; line-height: 50px; }

@media only screen and (max-width: 959px) {
   body { padding-bottom: 50px; }
}

Result:

All PHP snippets should be added via a child theme's functions.php file.