How to Create a Two-Row Bootstrap 4 Navbar with Vertically Stacked Menus?

Creating a Bootstrap 4 Navbar with Two Rows

The Challenge

In Bootstrap 4, users often encounter the challenge of structuring a navbar with a distinct arrangement: a prominent brand/icon on the left and two navbar-nav menus aligned vertically on the right. The objective is to achieve a layout where both menus occupy separate rows to the right of the icon.

Solution: Utilizing Flexbox

To align the menus vertically, we can leverage the flex-column flexbox utility class on the navbar-collapse div. This sets flex-direction: column for the div's child elements, ensuring they stack vertically.

<div>

Additional Considerations

For enhanced customization and alignment, consider the following tips:

• Adjusting Icon Size: If the icon is too large or small, use font-size to adjust its size.
• Creating Space Between Menus: Add some vertical space between the menus using margin-top on the second navbar-nav.
• Aligning Menus Right: Use margin-left: auto on the navbar-nav classes to align them to the right of the icon.

With these adjustments, you can create a Bootstrap 4 navbar with two vertically stacked menus, as desired.

The above is the detailed content of How to Create a Two-Row Bootstrap 4 Navbar with Vertically Stacked Menus?. For more information, please follow other related articles on the PHP Chinese website!