Bottom menu on mobile

Web users are lazy 🙂 Everything must go fast, and the less clicks and the less scrolling they have to do, the better!

This is why I think that « burger » menu on mobile is not a good feature: user have to click to see the menu and where they could go on the website.

Of course, when there are a too large number of menu items, you may have no other choice. But when it is possible, I think that menu at mobile screen bottom is a good feature, because mobile users are used to buttons a the bottom of their mobile.

But a bottom menu for desktop may not be a good idea.

Here is the CSS snippet I am using on this website to have « something » at the screen bottom on mobile and at the screen top on desktop. Of course, you can tune things as paddings.

add_action( 'wp_head', function () { ?>
<style>

.my_footer {
  position: fixed;
	width:100%;
	left:0;
	right:0;
	overflow: hidden;
	background-color: #000000;
	z-index:2;
}
	
.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.box :first-child {
    align-self: center;
}


@media (max-width:767px){
	.box {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 5px;
		padding-left: 10px;
		}
	
	.my_footer {
	bottom: 0;	
	}
}

@media (min-width:768px){
		.box {
		padding-top: 15px;
		padding-bottom: 15px;
		}
	
		.my_footer {
		top: 0;	
		}

}	

</style>
<?php } );

And here is the snippet for the « something » you want to put at bottom/mobile and top/desktop.

<div class="my_footer">
<div class="box">
Your something goes here
</div>
</div>

Here are some other websites I have designed that use bottom/top menus:

• Photo Studio TNK
• Photo Studio TNK Shop

You can get the mobile layout on a desktop by narrowing your window, and get the desktop layout on a mobile by turning your mobile horizontally.