Skip to content

Snippet: 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"></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">?php wpex_theme_icon_html( 'search' ); ?></a></div>

		</div>

	</div>

 div { flex-grow: 1; flex-basis: 0; line-height: 50px; }

@media only screen and (max-width: 959px) {
   body { padding-bottom: 50px; }
}
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top