App-Style Bottom Navigation Bar on Phones
Adds a "Mobile bottom bar" menu location and shows that menu as a fixed bar of up to five links at the bottom of the screen on phones, like a mobile app.
Opens WPIDE on
Code
// Screen width below which the bar shows (px).
$wpide_bottom_nav_breakpoint = 768;
add_action( 'after_setup_theme', function () {
register_nav_menus( array( 'wpide-mobile-bottom' => 'Mobile bottom bar' ) );
}, 20 );
add_action( 'wp_footer', function () use ( $wpide_bottom_nav_breakpoint ) {
if ( ! has_nav_menu( 'wpide-mobile-bottom' ) ) {
return;
}
$bp = absint( $wpide_bottom_nav_breakpoint );
echo '<style>.wpide-bottom-nav{display:none;}@media (max-width:' . esc_html( $bp - 1 ) . 'px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}.wpide-bottom-nav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#fff;border-top:1px solid rgba(0,0,0,.1);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,.06);}.wpide-bottom-nav ul{display:flex;margin:0;padding:0;list-style:none;}.wpide-bottom-nav li{flex:1;}.wpide-bottom-nav a{display:flex;align-items:center;justify-content:center;min-height:64px;padding:6px;font-size:13px;font-weight:600;text-align:center;text-decoration:none;color:#1d2327;}.wpide-bottom-nav .current-menu-item>a{color:#2271b1;box-shadow:inset 0 3px 0 #2271b1;}}</style>';
wp_nav_menu( array(
'theme_location' => 'wpide-mobile-bottom',
'container' => 'nav',
'container_class' => 'wpide-bottom-nav',
'container_aria_label' => 'Quick links',
'depth' => 1,
'fallback_cb' => false,
) );
} );Notes
Create a short menu (3 to 5 items) in Appearance > Menus and assign it to "Mobile bottom bar". Works with classic themes; block themes can assign menus there too.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.