October 5, 2023

Boost Conversions with a GenerateBlocks Sticky Mobile Menu Action Bar

Play Video

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.


Please make sure you have the following installed and activated:

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.

Required Resources

GeneratePress Logo
Free Options
GenerateBlocks Logo
Free Options
Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
Boost Conversions with a GenerateBlocks Sticky Mobile Menu Action Bar
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.