Scroll navbar in one line

I am trying to accomplish a fixed / sticky navbar but instead of the toggle, to be expanded the options but to scroll if the screen is small.

This behavior is similar as the bootstrap site https://getbootstrap.com/ if you check the site with a cellphone you will see it works as a single scrolling line, see image https://imgur.com/8wQVOAD

Screenshot of scrolling options of navbar

I have enabled as Expanded Always in Navbar options but the options appears in 2 lines when on mobile.

thanks

Is this your first post ?

Hi, yes, just starting with BS

Can you publish your example using Bootstrap Studio website One-click Publishing so we can see and inspect the code ?

If you don't want the navigation links to wrap, you can accomplish this by selecting the Nav component and giving it a min-width large enough to fit all your links on one line. Not sure why you'd want to do this, since it will make some of the links unclickable on a small screen, but this is how you can do it.

Sure, https://jam-navbar.bss.design/

check on desktop and on cellphone..

Got to https://getbootstrap.com/ and do the same, there you will see on cellphone that the upper links are scrollable, so if getbootstrap.com implements it seems to be a reasonable way to put a menu?

Actually I am trying to work on an app with this UI based on material design https://getmdl.io/templates/text-only/index.html check it with mobile form factor, the links scrolls and has a line below to see the active one.

I was considering using a TAB option for this, can this be also inserted inside a sticky navbar ?

thanks

Hmmn, thats funny the subscribed forum email I received says:

jmadrazo97 replied:

Hi, yes, just startion with BS

jmadrazo97 replied:

<h2>Hi, yes, just startion with BS</h2>

Read this post online: https://bootstrapstudio.io/forums/topic/scroll-navbar-in-one-line/#post-14694

If you don't want to receive any more email notifications for this topic, please visit the above link and click "Unsubscribe" at the top of the page.

Why would the post be misspelled ?????????????????

I saw I posted wrong and then edited, that is why you got the notification misspelled :-)

I kink of like the idea of the scroll tabs myself....

https://scrolltabs.bss.design/

thanks, I see but I am unable to replicate what you did :-(

Ok, I was using custom code in Bootstrap Studio to speed my reply. I realized that the html tags would have to be changed if you are using BS. Try the example again and make sure to add the custom style sheet.

Sorry, I forgot to post the updated link....

https://scrolltabsnav.bss.design/

Ok so I see that does not add scrolling and its a "undocumented addtion" currently not prime time yet.....

So here is the "Final fudge factory real McCoy" menu done in Bootstrap Studio.

https://scrollhorizontalnav.bss.design/

1) Add a Nav component to your page

2) Create the following CCS classes and rules in a new stylesheet

.navbar-nav-scroll { max-width: 100%; height: 50px; overflow: hidden; overflow-x: auto; align-content: flex-start; }

.nav .nav-link { padding-left: 20px; padding-right: 20px; }

3) Add the following classes to the Nav component

.navbar-nav

.navbar-nav-scroll

You should now have the horizontal scrolling behavior you seek.

I still don't see the point of this, since it in no way informs the user that they can in fact scroll the links horizontally.