Fixed top nav and fixed footer bar

User 2846958 Photo


Registered User
7 posts

Hi guys.

I'm wondering how to do a fixed top nav bar and an sticky footer bar on the same page?
I tried in position fixed and works on top nav, but for footer dont, so I sued sticky position and works but as long the breakpoints increase this footer dont stays at the bottom. Something I'm doing wrong.

Thanks.
User 2699991 Photo


Registered User
1,696 posts

Jose Rodriguez wrote:
Hi guys.

I'm wondering how to do a fixed top nav bar and an sticky footer bar on the same page?
I tried in position fixed and works on top nav, but for footer dont, so I sued sticky position and works but as long the breakpoints increase this footer dont stays at the bottom. Something I'm doing wrong.

Thanks.


1/ sticky doesn't work on all browsers (& mobile devices)
2/ you will need fix the height of the column/container holding the footer bar to 100 vmax at lower breakpoints & 100 vmin at higher breakpoints (where the height of the viewport is less than the width)
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2846958 Photo


Registered User
7 posts

Hi.

I just did it. Both are fixed in position. Top zero for top bar and the bottom zero for footer bar.
Thank you Wayan.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.