Floating Menu at bottom on mobile

Hi everyone.

I would like to have a simple menu of 4 buttons, similar to the one you can see in this screenshot.

Its intended for the mobile version only. It should appear on the whole website.

If you scroll down, the 4 buttons stay there all the time.

Id appreciate any help!

Hi,

Click on each button >> open a popup, open new page, or do nothing?

Hi,

It should open a new URL on the same tab.

Thank you!

On 10/31/2023 at 10:02 PM, UTGca said:

Hi,

It should open a new URL on the same tab.

Thank you!

Yes. It is possible, we will need to use some custom code

Can you share link to your site? We can test & give exact code easier

Hi,

The website is http://uptowngrill.ca

Thank you!

Use this tool to Website Tool > Code Injection > Footer. You can adjust text/url in the code

<div class="sticky-bar-mobile">
    <div class="item">
       <a href="google.com">
        <div class="icon">
         <img src="https://cdn.pixabay.com/photo/2017/06/30/10/57/icon-2457971_640.png" alt="Item 1">
        </div>
        <div class="text">Reservas</div>
      </a>
    </div>
  
    <div class="item">
        <a href="google.com">
        <div class="icon">
           <img src="https://cdn.pixabay.com/photo/2017/06/30/10/57/icon-2457978_640.png" alt="Item 2">
        </div>
        <div class="text">Menu digital</div>
      </a>
    </div>
  
    <div class="item">
       <a href="google.com">
        <div class="icon">
           <img src="https://cdn.pixabay.com/photo/2017/06/22/10/07/icon-2430237_640.png" alt="Item 3">
         </div>  
        <div class="text">Domicilious</div>
      </a>
    </div>
  
    <div class="item">
       <a href="google.com">
        <div class="icon">
           <img src="https://cdn.pixabay.com/photo/2017/06/30/10/57/icon-2457974_640.png" alt="Item 4">
        </div>
        <div class="text">redes</div>
      </a>
    </div>
</div>
<style>
  @media screen and (min-width: 768px) {
  .sticky-bar-mobile {
    display: none !important;
  }
} 
.sticky-bar-mobile {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #b80f0a;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            color: #fff;
        }

.icon {
            display: block;
            font-size: 24px;
            margin-bottom: 5px;
            text-align: center;
        }

.text {
            font-size: 16px;
        }
 .item img {
            width: 24px; /* Adjust the width as needed */
            height: 24px; /* Adjust the height as needed */
            margin-bottom: 5px;
}
.item a {
            text-decoration: none;
            color: #fff;
            display: block;
 }

</style>

Thank you! It worked perfectly as you can see it at uptowngrill.ca.

Any idea how to make it always appear on mobile? Right now it is only visible when you scroll down.

I used Google Material Icons instead of images. Any clue on how to center each individual icon to align centered with text label?

Thank you again!

Amazing. Thank you!