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 !
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."