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>