Probably you have seen on Amazon app that there is a nice looking sticky bottom mobile menu. Well, today I’m going to show you how to create a sticky mobile bottom menu for Kadence theme or Astra theme. Also, you can use this solution in every WordPress theme that uses hooks.
This is what we are creating today.
How to Create a Sticky Mobile Bottom Menu for Kadence Pro Theme?
In this section we’ll take a look how to create a sticky mobile bottom menu using a Kadence Pro theme. This is a bit easier then with other themes.
Step 1: Create a three column fixed element
Go to Kadence >> Elements >> Add new and select Fixed as a type.
- Placement: Fixed bottom (no space below footer)
- Display: Entire website (or wherever you would like it to be shown)
- User settings: All users (or particular group you would like it to be shown)
- Device settings: Tablet and mobile
Step 2: Create a layout
Now go and create a layout using you favorite page builder. In this tutorial I‘m using the Kadence Blocks for Gutenberg plugin.
If you want to use the layout I created for the Woocommerce based site (seen in the screenshot above) then paste this code to your Gutenberg editor.
<!-- wp:kadence/rowlayout {"uniqueID":"_c40e75-87","columns":3,"mobileLayout":"equal","colLayout":"equal","maxWidth":1190,"topPaddingM":20,"bottomPaddingM":20,"bgColor":"#ffffff","verticalAlignment":"middle","topSep":"","topSepColor":"palette2","topSepHeight":49,"bottomSep":"","tabletPadding":[25,"",25,""],"topSepWidth":11,"bgColorClass":"white","vsdesk":true,"vstablet":true,"className":"sticky-bottom"} -->
<div class="wp-block-kadence-rowlayout alignnone kvs-lg-false kvs-md-false sticky-bottom"><div id="kt-layout-id_c40e75-87" class="kt-row-layout-inner kt-row-has-bg kt-layout-id_c40e75-87 has-white-background-color"><div class="kt-row-column-wrap kt-has-3-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-equal"><!-- wp:kadence/column {"border":"#ebebeb","borderWidth":[0,1,0,0],"uniqueID":"_04d319-50"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_04d319-50"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_home","link":"https://pood.veebikoda.com/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_437a62-3a"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_437a62-3a aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/" class="kt-svg-icon-link"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_home"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->
<!-- wp:kadence/column {"id":2,"border":"#ebebeb","borderWidth":[0,1,0,0],"borderRadius":[0,0,0,0],"uniqueID":"_fc266b-6b","backgroundImg":[{"bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"color":"#000000","opacity":0.2,"spread":0,"blur":14,"hOffset":0,"vOffset":0,"inset":false}]} -->
<div class="wp-block-kadence-column inner-column-2 kadence-column_fc266b-6b"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_user","link":"https://pood.veebikoda.com/my-account/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":20,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""},{"icon":"fe_user","link":"https://pood.veebikoda.com/my-account/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_ea8c73-2b"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_ea8c73-2b aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/my-account/" class="kt-svg-icon-link" style="margin-right:20px"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_user"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->
<!-- wp:kadence/column {"id":3,"border":"#ebebeb","borderWidth":[0,0,0,0],"borderRadius":[0,0,0,0],"uniqueID":"_517230-52","backgroundImg":[{"bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"color":"#000000","opacity":0.2,"spread":0,"blur":14,"hOffset":0,"vOffset":0,"inset":false}]} -->
<div class="wp-block-kadence-column inner-column-3 kadence-column_517230-52"><div class="kt-inside-inner-col"><!-- wp:kadence/rowlayout {"uniqueID":"_c3279e-88","mobileLayout":"equal","collapseGutter":"none","columnGutter":"skinny","colLayout":"equal","currentTab":"mobile","maxWidth":1190,"topPaddingM":0,"bottomPaddingM":0} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_c3279e-88" class="kt-row-layout-inner kt-layout-id_c3279e-88"><div class="kt-row-column-wrap kt-has-2-columns kt-gutter-skinny kt-v-gutter-none kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-equal"><!-- wp:kadence/column {"uniqueID":"_a6ab46-78"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_a6ab46-78"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_shoppingBag","link":"https://pood.veebikoda.com/cart/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_96883c-39","textAlignment":"right","tabletTextAlignment":"right","mobileTextAlignment":"right"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_96883c-39 aligncenter" style="text-align:right"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/cart/" class="kt-svg-icon-link"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_shoppingBag"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->
<!-- wp:kadence/column {"id":2,"uniqueID":"_d2eeb7-9f"} -->
<div class="wp-block-kadence-column inner-column-2 kadence-column_d2eeb7-9f"><div class="kt-inside-inner-col"><!-- wp:shortcode -->
[woo_cart_but]
<!-- /wp:shortcode --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout -->Now publish and you are good to go.
How to Create a Sticky Mobile Bottom Menu for Kadence Free Theme?
Since Kadence free does not have the elements add-on we need to be a bit more creative here. Therefore go to Plugins >> Add new and search for Reusable Blocks Extended plugin.
Install and activate it and then go to Reusable Blocks >> Create new and create a layout as I showed you in the previous chapter.
Now, since I want to show the sticky mobile bottom bar only for tablets or mobiles then I have to set the rules using Kadence blocks row Visibility settings. Also, under the Advanced settings givt the row an additional CSS class “stiky-bottom”. We’re going to need it later.
See the screenshot.
Step 2: Copy the code snippet
In this step we are going to use Kadence hooks for showing our sticky mobile bottom bar. Therefore, either use the functions.php file in your child theme or better yet, use the Code Snippets plugin to add the code.
So, grab this code here below and paste it accordingly. Don’t forget to replace the [reblex=”212″] shortcode.
add_action( 'kadence_after_footer', 'kadence_sticky_mobile_bottom_bar', 20 );
function kadence_sticky_mobile_bottom_bar() {
echo do_shortcode( "[reblex id='1303']" ); // Replace this shortcode here
}Step 2: Add additional CSS
Now the bottom bar is visible but it’s not sticky. Let’s fixi with this custom CSS code here below. Paste it to the Customizer >> Additional CSS code bow and publish. Now you’re good to go.
.sticky-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
-webkit-box-shadow: 0px 0px 7px 0px rgba(102,102,102,0.6);
box-shadow: 0px 0px 7px 0px rgba(102,102,102,0.6);
}How to Create a Sticky Mobile Bottom Menu for Astra Theme?
If you have followed the tutorials above then everything is basically the same. Just use Astra related hook to show your sticky bottom mobile bar. Astra hooks can fe found here.
So, add this code here below to the functions.php or Code Snipepts code box.
add_action( 'astra_footer_after', 'astra_sticky_mobile_bottom_bar', 20 );
function astra_sticky_mobile_bottom_bar() {
echo do_shortcode( '[reblex id="1361"]' ); // Replace the shortcode
}NB! Don’t forget to paste the CSS code shown above to the Additional CSS box.
How to Add Ajax Item Count Next to the Woocommerce Cart Icon?
This is optional and you don’t have to do it. But if you want to show nice cart item count number next to the cart icon (see the screenshot above) then paste this code to the Code snippets code box. (thank you WP beaches)
add_shortcode ('woo_cart_but', 'woo_cart_but' );
/**
* Create Shortcode for WooCommerce Cart Menu Item
*/
function woo_cart_but() {
ob_start();
$cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<a class="menu-item cart-contents" href="<?php echo $cart_url; ?>" title="My Basket">
<?php
if ( $cart_count > 0 ) {
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?>
</a>
<?php
return ob_get_clean();
}
// Ajaxify
add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_but_count' );
/**
* Add AJAX Shortcode when cart contents update
*/
function woo_cart_but_count( $fragments ) {
ob_start();
$cart_count = WC()->cart->cart_contents_count;
$cart_url = wc_get_cart_url();
?>
<a class="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php
if ( $cart_count > 0 ) {
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?></a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}Next, go to the Reusable Blocks or Kadence element you created earlier and add thw [woo_cart_but) shortcode in the place you would like it to be shown.
Now go to the Customizer >> Addtitional CSS and paste this code and save.
.cart-contents {
position: relative;
text-decoration: none;
}
.cart-contents-count {
position: absolute;
top: 12px;
right: 1px;
transform: translateY(-105%) translateX(25%);
font-size: 12px;
line-height: 22px;
height: 24px;
width: 24px;
vertical-align: middle;
text-align: center;
color: #fff;
background: #000;
border-radius: 50%;
padding: 1px;
}
If everything is OK then it should look like this.
