Boostrap Navbar-expand Not Working Properly

I'm working on building a portfolio website currently. This is my first time using bootstrap, so I'm still getting the hang of things. Currently, I'm attempting to build a navbar t

Solution 1:

To be more specific about what Bootstrap is doing: Bootstrap provides tools to allow the author not only to style html elements but to style them differently at different screen sizes. .navbar-expand-lg behaves differently from .navbar-expand-sm, for example. If you want the nav menu to always be expanded, use .navbar-expand with no -sm, -md, -lg, or -xl appended to the class name.

Bootstrap uses .navbar-expand-lg in the example code on its Navbar documentation page, but does explain that

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

You may append {-sm|-md|-lg|-xl} depending on when you want your navbar to stop expanding and begin to stack vertically. This is a common pattern in Bootstrap by the way, there are a lot of customizable classes based on mobile responsive breakpoints, so be advised going forward a lot of styling may be tweaked to the degree to which your design is to be responsive.

https://codepen.io/mdlanglais/pen/VxPmyR