CODEWITHSUNDEEP
htmlcssbootstrap-4
Cassius Garcia
Cassius Garcia

Reputation: 57

How to expand Bootstrap NavBar list item vertically instead of horizontally

I am trying to have a fixed vertical Bootstrap NavBar on the left side of the screen for large screens and have it collapse into a NavBar button for smaller screens.

I have tried placing the Bootstrap NavBar inside of a column but the list items continue to expand horizontally.

How do I make the list items stack vertically on top of each other instead of side by side horizontally when expanding the page?

enter image description here

<div class="col-lg-2">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
</div>

Upvotes: 2

Views: 904

Answers (1)

avia
avia

Reputation: 1568

You can use CSS and change the flexbox direction to column for .navbar class and collpase ul element like this. Please note the importance of using @media query to limit that behaviour to the desktop (large screens) using bootstrap limits for responsiveness found here so we will use 1200px. https://getbootstrap.com/docs/4.1/layout/overview/

@media screen and (min-width:1200px) {
.navbar, .collapse ul {
  flex-direction:column!important;
}}

https://codepen.io/larrytherabbit/pen/VwjwwoV

Upvotes: 2

Related Questions