CODEWITHSUNDEEP
htmlbootstrap-4nav
M.K
M.K

Reputation: 1495

nav-pills nav-stacked not working

I am trying to use nav stacked to make a vertical menu with nav pills. The problem is that It does not seem to work. It keeps the "horizontal" value. I have found solutions not implementing nav stacked but I need to use it this way.

implementing this: 

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

I have tried using older versions but then the rest of my Webpage changes, and I do not want to. 

<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>

Upvotes: 0

Views: 4980

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

nav-stacked is deprecated in Bootstrap 4. Use flex-column to stack your menu. Use the snippet for reference.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>

Hope this helps

Upvotes: 10

Related Questions