How To Create A Floating Bottom Mobile Menu

I’m going to show you how to create a floating bottom mobile menu in Divi.

‍

Most websites have a hamburger menu or mobile menu at the top of the screen. Well, it is a must. But what if you have a long horizontal logo and you also want to include social icons on the side or you want a call-to-action button? You might be wondering how you will squeeze all of those into one line while your logo is still visibly clear.

That is why I came up with an idea of what to do if we put the navigation on the bottom part of your device and float it on your screen.

‍

Here’s what we are going to do. First you will need to install “BCM Duplicate Menu“. This is a very handy plugin if you don’t want to alter your main menu.

‍

Next, on your WordPress dashboard, go to Appearance, then Menus. Duplicate your current primary menu by clicking “Duplicate Menu” beside “Save Menu”. Name your new menu anything you like. I named mine “Bottom Footer Menu.”

‍

Then on the upper right of your screen you will see a “Screen Options” toggle. Open it and check the “CSS Classes”.

‍

Now you can add your menus, either pages, posts, custom links, or categories, or you can use what you currently have on the menu. You may need to add “MENU” or any text and place it at the top of the list. This will be your label on your button.

Open the “MENU” and under the “CSS Classes” field, add “custommenulabel”.

Next, click “Save Menu.”

‍

Create a new blank page and add a menu module, then select the one that you have currently created. You can customize the design of your menu, but you don’t have to add a logo since we are focusing only on the menu.

‍

Then go to the advanced tab and open the “Visibility” section and select “Disable on Desktop.” Next, open the “CSS ID & Classes” and under the “CSS ID” field, add “testmenubottom” and in the “CSS Class” add “testmenubottomclass”. Click Save to exit the visual builder.

‍

Next, on your WordPress dashboard, go to the Divi section and scroll down to the “Custom CSS” box and paste the CSS code that you can see in the description below. Click “Save Changes.”

/* Bottom Mobile Menu */
.custommenulabel{
 position: absolute !important; top: 0 !important; text-align: center !important; width: 100%; border-bottom: 1px solid #2ea3f2;
}
.testmenubottomclass{
 bottom:-440px !important; transition: all 0.5s ease;
}
#testmenubottom .mobile_menu_bar{display:none !important;}
#testmenubottom .et_pb_menu_inner_container .et_pb_menu__wrap .et_mobile_nav_menu .mobile_nav ul.et_mobile_menu{
 width: 100vw !important; position: fixed !important; left: 0vw !important; height: 488px !important; display: flex !important;
 justify-content: center !important; flex-direction: column !important; opacity: 1 !important;
 visibility: visible !important; transition: visibility 0.3s,opacity 0.3s ease-in-out;
 padding: 0 !important; transition: all 0.5s ease;
 top: auto;  bottom:-440px !important; overflow-y:scroll;
}
/* Bottom Mobile Menu */

‍

Then navigate to the “Integration” tab and paste the JQuery code that you can also find in the description section of this page. Click “Save Changes.”

‍

<script>
jQuery(function($){	
	$("#testmenubottom").click( function(event){
   		event.preventDefault();
    	if ( $(this).hasClass("testmenubottomclass") ) {
        	$(".et_mobile_menu").stop().animate({marginBottom:"440px"}, 500);                            
    	} else {
        	$(".et_mobile_menu").stop().animate({marginBottom:"0px"}, 500);
    	}
    	$(this).toggleClass("testmenubottomclass");
    	return false;
	});
});	
</script>

‍

To test your page, right-click on your screen and select “Inspect”, then enable the toggle device toolbar or look for the mobile and tablet icons. Or you can just resize your screen.

‍

There you have it, my way of creating a floating bottom mobile menu.

‍