What is the best way to create a responsive header like Bubble’s homepage.
I would like the horizontal menu buttons to disappear on mobile devices and replace it with an icon to trigger a menu when the user clicks on the icon (typical mobile header)
Exactly like Bubble’s header.
You have multiple options, you can design a different page that opens when your site is opened from a mobile device.
You can do that by selecting the “mobile version” field at the page you are editing.
Or you can either use a workflow that runs when the width changes or set constraint to which elements are shown/hidden at what width. With this option you can do many different version, for ipad size/mobile size etc… but you have to design different elements for different screens.
Or you can smartly and carefully design one page that also looks good when resized.
I find that the 3rd option is the most difficult as sometimes the elements you are using on a desktop just can’t be viable for mobile.
That could help…
Thanks guys! The Slidebar menu is what I was missing!
Sorry guys, I can see the slidebar menu in emmanuals link, but not in my own app. What am i missing here?
It’s a plugin you have to install. Once you install it, it’ll show up in that panel.
Oh okay I found it, its called ‘slidable menu’ - I was searching for ‘slidebar menu’ in the plugin shop.
Anyway… I’ve found it and put it in my app, but how do you make it appear / disappear when switching between mobile and desktop mode? I have been sifting through emmanuals app but can’t seem to figure it out. Thanks!
Got it! for future reference you need to go to Responsive, click the thing and add a hiding rule.
Thanks!
Did anyone figure out how to create a slidable menu with different groups for when a user is logged in vs logged out. and if the user is logged in and is a seller on the marketplace he sees a different set of links than users?
On Emmanuel’s link it’s not very clear how he gets this to work.
Thank you
