Developing a bottom navbar with drop "up" nav menu

[Brian_M_Fromknecht]

I am trying to adhere to the small hands of the world and develop a bottom navbar which makes for a better UI / UX on mobile. I am using the navbar widget but I cannot figure out how to get the hamburger button to open the navbar menu so it slides in right and also fills the height of the viewport. The nav menu still slides in right but only displays the first link within the nav menu and the remaining links are unseen of the screen.

HERE IS HOW I’D LIKE IT TO LOOK:

HERE IS HOW IT LOOKS CLOSED: :

HERE IS HOW IT LOOKS OPENED CURRENTLY - THE WRONG WAY OR UNINTENDED WAY:

----------READ ONLY LINK HERE:------------
https://preview.webflow.com/preview/werackyourworld?preview=646d71e490397efbb06c7b09465b4b49

This prototype bottom navbar is located within the file manager in the last page in the file called “test page 3.”

And the live link:

http://werackyourworld.webflow.io/test-page-3
TO SEE THIS YOU’LL NEED TO RESIZE YOUR VIEWPORT SO THE NAVBAR GOES INTO MOBILE VIEW

[nwdsha (Naweed)]

Hi @Brian_M_Fromknecht,

Try making the mobile menu absolute position and select full (square icon) to take up 100% height and width of the screen.

For the dropdown menu to open upwards, try this;

#menu:hover ul li:hover ul
position: absolute;
margin-top: 1px;
bottom: 100%;

FYI (Test page 3 returns a 404 page)

Hope this helps.

[Brian_M_Fromknecht]

I will try this out. Thank you!

[nwdsha (Naweed)]

You’re welcome @Brian_M_Fromknecht

Keep us updated.