# Footer - Floating Menu to stay on the edge of any screen size

**URL:** <https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008>\
**Category:** Need help\
**Created:** [April 24, 2021, 9:58pm UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008 "2021-04-24T21:58:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nazostro](https://avatars.discourse-cdn.com/v4/letter/n/51bf81/32.png) [@nazostro](https://forum.bubble.io/u/nazostro)\
**Post date:** [April 24, 2021, 9:58pm UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/1 "2021-04-24T21:58:50Z")

</div>

Hello!

I am building an app that contains a footer with pagination, “per page” view dropdown, etc… and I a wanting to achieve the effect of it staying at the bottom of my screen at all times (regardless of the page size in height)

 ![Screen Shot 2021-04-24 at 2.55.51 PM](https://us1.discourse-cdn.com/bubble/original/3X/6/c/6cbf3be67eb18497a8a532e44e2a024030e3cde0.jpeg)

As you can see in the screenshot above, it is right on the bottom of my screen.

 ![Screen Shot 2021-04-24 at 2.56.01 PM](https://us1.discourse-cdn.com/bubble/original/3X/8/4/84f3b82a4b188755e04e3c67c3db697829883f41.jpeg)

In the second screenshot, I added content in a separate group that is below the footer because I was testing looks when content goes that far. When I scroll, the footer goes up

Hopefully I explained this well enough - sorry if I didn’t, still learning and new to web dev terms!

 ![Screen Shot 2021-04-24 at 3.00.47 PM](https://us1.discourse-cdn.com/bubble/original/3X/1/f/1f69bd51273dac1246c29b79aae6bf174c1d0aff.jpeg)  
Addition: When I anchor is to Right & Bottom, it now is displaying in the middle of the screen

---

<div class="post-metadata">

**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\
**Post date:** [April 25, 2021, 12:15am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/2 "2021-04-25T00:15:09Z")

</div>

![image](https://us1.discourse-cdn.com/bubble/original/3X/9/b/9b79673cbfdae39cedced0ef2ea0d3ccee52ec0a.png)

---

<div class="post-metadata">

**Author:** ![nazostro](https://avatars.discourse-cdn.com/v4/letter/n/51bf81/32.png) [@nazostro](https://forum.bubble.io/u/nazostro)\
**Post date:** [April 25, 2021, 12:25am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/3 "2021-04-25T00:25:11Z")

</div>

Thank you for all the help! 🙂

What this still be possible with a Left Floating Menu? (The footer won’t be able touch the left side of the page)

---

<div class="post-metadata">

**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\
**Post date:** [April 25, 2021, 12:47am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/4 "2021-04-25T00:47:49Z")

</div>

For both to stick to where you want them they must float relatively to both and touch the edges of the screen (the footer horizontally and the left menu vertically)

Yes … they both can coexist doing this

---

<div class="post-metadata">

**Author:** ![nazostro](https://avatars.discourse-cdn.com/v4/letter/n/51bf81/32.png) [@nazostro](https://forum.bubble.io/u/nazostro)\
**Post date:** [April 25, 2021, 1:14am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/5 "2021-04-25T01:14:36Z")

</div>

Tried to do it, but my menu goes to the middle of the screen the second I make the scrollable area further below the footer

 ![Screen Shot 2021-04-24 at 6.13.49 PM](https://us1.discourse-cdn.com/bubble/original/3X/1/d/1d71c7b295064e828403f23af265f7442418d11c.jpeg)

Zero idea why it does this. When the content area doesn’t go further than the footer, it’s normal, but the second is goes further down the page (how I need it to), the footer go into the middle

---

<div class="post-metadata">

**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\
**Post date:** [April 25, 2021, 1:18am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/6 "2021-04-25T01:18:26Z")

</div>

Check the horizontal and vertical floating settings of the floating group elements. Play with them until you make things work. Hint: float relative to both, left and above

---

<div class="post-metadata">

**Author:** ![nazostro](https://avatars.discourse-cdn.com/v4/letter/n/51bf81/32.png) [@nazostro](https://forum.bubble.io/u/nazostro)\
**Post date:** [April 25, 2021, 1:27am UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/7 "2021-04-25T01:27:29Z")

</div>

Awesome! Managed to figure it out! Thanks so much for your help @cmarchan 🙂 🥳

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [July 3, 2021, 9:59pm UTC](https://forum.bubble.io/t/footer-floating-menu-to-stay-on-the-edge-of-any-screen-size/148008/8 "2021-07-03T21:59:45Z")

</div>

This topic was automatically closed after 70 days. New replies are no longer allowed.
