Is there a way to transform the navigation bar into slider bar menu when viewed on mobile devices or tablet?

Hi! Is there a way to make the navigation bar transform into slider bar menu when viewed on a smaller screen?

Yes. You have to do 2 things.

  1. Set a condition for your nav bar to hide when the current page width is less than x pixels
  2. Set a condition to show your slider bar menu when the current page width is less than x pixels

The above actions have to be set individually for your element/group. Like this:
image

When you want to show the element, make sure to check the box This element is visible. When you want to hide it, leave it unchecked.

Alternatively, you can make a mobile page that shows instead of the main desktop page. That way you can fine tune the mobile experience as is best for your use case.

@AlonsoC Sir what do you mean by I can make a mobile page that shows instead of the main desktop page? Maybe you can help me with my website having a better mobile experience. Thanks.

You´ll have to read the reference manual and look for posts here in the forum to understand this concept in greater detail. But in a nutshell, every page that you create in Bubble has a setting called Mobile version which you can see in the screenshot below. So let´s assume that you create two versions of your home/index page: the normal Index page for desktop and an index_mobile page (this is just a name I gave it, you can name it whatever you want). Both are separate pages in your app showing different elements and design.

Because you want to show the mobile_index page when a user visits your Bubble app on a mobile device, you set this by going to your Index page, double clicking on it and look for the Mobile version setting in the Editor. Then from that dropdown, select the page you want to show, in this case your mobile_index. You can do this for any page in your app. So you can have a regular Settings page and a mobile version etc.

image

Reference:

1 Like

@AlonsoC Thank you so much, sir, I’ve been searching and watching a lot of videos about having a responsive website or having a better mobile experience and I didn’t find anything helpful. I appreciate your effort, sir, I’m sure this will be a big help for me.

@AlonsoC So instead of playing with the responsive settings for my website pages, I can just make 2 versions per page instead, One is for the desktop version and one for the mobile version? Did I understand you, correct sir?

Yes, that is an option. However it has its tradeoffs:

  1. You have to build and maintain two pages (the desktop and the mobile) and if your site has let´s say 6 pages, you´ll end up doubling that to account for the mobile version
  2. The mobile version if I recall correctly, is only served for mobile phones, not tablets (so you may still have to make your main page responsive at least down to tablet sizes

So it all depends on what content and functionality you are trying to build. In the end, you can take any of these 3 strategies or any combination thereof, however only experience will teach you which one is best for your project.

  1. Build just one version of your page that is responsive from desktop down to mobile (by using groups, hiding and showing as page width decreases or increases)
  2. Same as #1 but build a mobile page only when it gets too hard to make the main page responsive for small devices
  3. Same as #1 but build a mobile page from the start
2 Likes