CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Smack
Smack

Reputation: 199

Bootstrap 3 Vertical Nav bar

I want to create navigation bar [vertical] with bootstrap 3. I tried this but it didn't work.

<ul class="nav nav-pils nav-stacked">
     <li>jedan</li>
     <li>dva</li>
     <li>tri</li>
     <li>cetriri</li>
     <li>pet</li>
</ul>

I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?

Upvotes: 9

Views: 100970

Answers (5)

Segun Kess
Segun Kess

Reputation: 463

I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:

<nav class="list-group"> 
   <ul class="nav">
    <li>
        <a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
        </a>
     <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
        <li>
            <a href="#" class="list-group-item">
                Item 2
            </a>
        </li>
        <li>
        <a href="#" class="list-group-item">
                Item 3
            </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 2

Arcsn
Arcsn

Reputation: 231

you could use the pills or you just could write this:

your html:

<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
  <a class="navbar-brand" href="#">LOGO</a>
  <ul class="nav navbar-nav">
    <li><a href="#home"><i class="fa fa-home"></i><span> Link1 </span></a></li>
   <li><a href="#info"><i class="fa fa-info-circle"></i><span> Link2 </span></a></li>
   <li><a href="#love"><i class="fa fa-heart"></i><span> Link3 </span></a></li>
   <li><a href="#work"><i class="fa fa-briefcase"></i><span> Link4 </span></a></li>
   <li><a href="#contact"><i class="fa fa-envelope"></i><span> Link5 </span></a></li>
  </ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
 <div class="row">
   <h2>Link 1</h2>
 </div>
</div>
<!-- 2nd section-->
  <div class="container" id="info">
 <div class="row">
   <h2>Link 2</h2>
 </div>
</div>
    <!--3rd section-->
    <div class="container" id="love">
 <div class="row">
   <h2>Link 3</h2>
 </div>
</div>
    <!--4th section-->
    <div class="container" id="work">
 <div class="row">
   <h2>Link 4</h2>
 </div>
</div>
    <!--5th section-->
    <div class="container" id="contact">
 <div class="row">
   <h2>Link 5</h2>
 </div>
</div>
</div>

your css: 

/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
  width: 140px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left */
  width: 139px;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

.container {
  height: 1000px;
}

.wrapper {
  margin-left: 140px;
}

working example here: bootply

Upvotes: 5

Anchit
Anchit

Reputation: 35

Use navbar-pills. It will work.

Upvotes: 1

Samuel De Backer
Samuel De Backer

Reputation: 3461

nav-pills class needs two l:

<ul class="nav nav-pills nav-stacked">
   <li>jedan</li>
   <li>dva</li>
   <li>tri</li>
   <li>cetriri</li>
   <li>pet</li>
</ul>

http://getbootstrap.com/components/#nav-pills

Upvotes: 24

Matthew Darnell
Matthew Darnell

Reputation: 4588

It looks like you are missing an l in nav-pills (you have it listed as nav-pils)

<ul class="nav nav-pills nav-stacked">
   <li>jedan</li>
   <li>dva</li>
   <li>tri</li>
   <li>cetriri</li>
   <li>pet</li>
</ul>

http://getbootstrap.com/components/#nav-pills

Upvotes: 7

Related Questions