Boost Conversions with a GenerateBlocks Sticky Mobile Menu Action Bar

Creating a sticky mobile menu can be very helpful for your website’s user experience. In this tutorial, we’ll walk you through how to create a sticky mobile action bar using GeneratePress and GenerateBlocks. This action bar will feature four essential icons: phone, email, chat, and map pin, making it easier for your visitors to interact with your website.

Prerequisites

Please make sure you have the following installed and activated:

• GeneratePress (Theme)
• GenerateBlocks (Plugin)

Create a New Element in GeneratePress

1. Navigate to Appearance > Elements in your WordPress dashboard.
2. Click on Add New.
3. Select Block as the element type.
4. Name it “Mobile Action Bar”.
5. Add “mobile-action-bar” under Aditional CSS Class(es).

Add Containers and Icons

1. Add a new container block inside the element.
2. Set the container’s display to Flex.
3. Insert four additional containers inside the main container.
4. Select all four containers and change the Flex Child > Grow to “1”.
5. Add icons to each of the four containers. Use SVG icons for phone, email, chat, and map pin.

Style the Containers and Icons

1. Navigate to Layout Panel of the main container.
2. Set the display to Flex.
3. Adjust the size of the icons to 2em.
4. Add padding to the containers to prevent the icons from touching the edges.

Add Links and ARIA Labels

1. Select each container.
2. Add a link to each container.
3. Include an ARIA label for screen readers.

Add Custom CSS

1. Navigate to Appearance > Customize > Additional CSS.
2. Add the following CSS to fix the position of the action bar at the bottom of the screen:

   .mobile-action-bar {
     position: fixed;
     width: 100%;
     bottom: 0;
     z-index: 999;
   }
   
   .mobile-action-bar > *:not(:last-child) 
   { border-right: 1px solid lightgray; }
   

Final Touches

1. Add a top border and a subtle box shadow to the main container.
2. Set the element to display only on mobile devices (hide on desktop and tablet).

Conclusion of a GenerateBlock Sticky Mobile Menu Action Bar

Creating a sticky mobile menu with GenerateBlocks is a straightforward process that can significantly improve user experience and conversions. By following these steps, you’ll have a functional and stylish mobile action bar in no time.