[Support request] Create a Sticky Bottom Menu for Mobile

[Omar]

Hello there,

I was trying to do a menu such as the one in the following image:

which contains the icons to the main store sections.

So, I start looking for a solution at the developer’s sites but with no working results. I found one solution but it will not works until I buy their plugin (check the following link):
https://www.sebdelaweb.com/flatsome-tutorial/create-a-sticky-bottom-menu-for-mobile/

Are there any solutions that I can apply?

[Bryan]

You can create the ‘tap bar’ as a GenerateBlocks block hook and then use custom CSS to make it stick to the bottom on mobile.

In order to keep it from covering anything in your footer, you just have to make sure the bottom margin or padding of your footer is equal to or greater than the height of the tap bar.

Here is the sticky CSS for you.

.sticky {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

[Elvin]

Hi,

So, I start looking for a solution at the developer’s sites but with no working results. I found one solution but it will not works until I buy their plugin (check the following link):

Their solution only provided the styling and the shortcode. The PHP coded needed for the shortcode to work is most likely on the plugin they require you to purchase.

Are there any solutions that I can apply?

Unfortunately, by default, GeneratePress doesn’t have a sticky footer functionality.

While it’s possible to place a menu-like bar that is position:fixed to the bottom of the viewport through a Block Element or a Hook Element, the “sticky” behavior, if you must implement it, will require custom JavaScript that checks when the footer enters the viewport for the menu-like bar to change from fixed to relative to footer bar so it doesn’t overlap with the footer.

And this, I’m afraid, is a site customization that is outside of our scope.

[Author]

Posts