Bootstrap 4: Persistent Navbar Items Outside Collapsed Container

Navigating a website can be frustrating when important links, such as social media icons, disappear when the navbar collapses on smaller screens. Fortunately, Bootstrap 4 offers an elegant solution to keep certain navbar items visible even when the menu is collapsed.

Problem

The issue arises when the navbar is set to collapse when the screen width becomes narrow. This behavior is controlled by the .collapse class. By default, all elements within the .collapse container are hidden when the collapse is activated.

Solution

To keep certain navbar items from disappearing with the collapse, simply move them outside the .collapse container. This can be achieved using the order-* utility classes to adjust the flexbox order of the elements.

Code Example

In this example, the social media icons are placed within a container outside the .collapse element. The d-flex and order-* classes ensure that the icons remain in the correct order and position when the navbar is collapsed.