1

I am having difficulty to get Bootstrap to display my nav options horizontally (i.e. similar to examples shown in the Bootstrap docs at https://getbootstrap.com/docs/5.0/components/navbar/#nav)

Here is the minimal code in Codepen for my page : https://codepen.io/6a0a49af-a3f9-4e78-8ccf-91d8d1b1f102/pen/WNGPQQj

Just to be clear: In my Codepen example, Home Features Pricing should appear horizontally, not vertically.

I think the problem might be to do with my use of flex-column in <body>. But I cannot remove that without breaking other items in my design (for example the sticky footer - using flex for a sticky footer is much cleaner than the hacky alternative of setting fixed height etc. etc.).

So I'm a bit stuck really !

Little Code
  • 1,315
  • 2
  • 16
  • 37

1 Answers1

3

The only problem is the navbar is missing the navbar-expand class..

<nav class="navbar navbar-light navbar-expand bg-light">
  ...
</nav>

https://codeply.com/p/WSBVjlDiy6

The Bootstrap navbar is mobile-first, so by default it's collapsed. As shown in the docs...

"Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes."

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624