Streaming live at 10am (PST)

"Drop" UP Menu in mobile layout


#1

Hi everyone!

For my website project I want to implement a trend that comes from mobile app UIs:
Putting the menu bar at the bottom of the screen so it is easily reachable on big phone screens as well.

I cannot find any option to make the menu appear above the menu button in the mobile layout(s)… There is only drop down (left, center and right). My knowledge of webflow is not very deep yet, so I don’t even know where to begin building something that’s seemingly not provided for in the GUI. Can someone help me with a few suggestions? Every input is appreciated!

Thanks!
Robin


Here is my site Read-Only: LINK


#2

Hi, I made a template that you can clone to analyze, that is showing something similar: it ditches the hamburger menu for mobile, in favor of an app-like bottom bar.

It’s not the way you want it I know but could be interesting nonetheless.

I wanted to build a system where the 4 first links are as icons and the remaining ones were in a pop up menu like the one you describe (the last icon of the bar would be a drop up menu item). But at the moment I don’t know how to build that with the existing, unique site menu element. It’s easy, though, to do a duplicate of the menu, that’s only designed for mobile, and shown for mobile (while the original menubar is hidden), and manually create such a drop up menu, and fit your items inside of it. If you’re a bit skilled you can probably make a symbol of just the menu items and use the symbol on both instances of the menu.


#3

Hi vincent, thanks for the link!
It’s not what I’m looking for, true, but it actually solves the same problem in an elegant way! However, I want to refrain from using icons or small type. A second menu makes sense to me… maybe I can make a Menu button that triggers an animation for this second menu.


#4

Did you try from the wordpress editor page? I guess that can help you out.

WIth Regards,
Rokki Bumli https://8ballpool.onl/
https://googlehangouts.ooo/
https://omegle.onl/