skip to Main Content

I am using Twitter Bootstrap and need to convert this vertical navigation to something horizontal and smaller:

enter image description here

I would like to achieve this by using two NAVs each with the section text prepended. Basically, like this:

Training: Become Certified, Train Staff, Learn to Pack, Mentoring and Hands-on Training, NASMM FrontDoor Training

Grow Your Business: Public Speaking 2.0, Presentations in a Box

I am using this code:

<ul class="nav nav-pills">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>

But get this result:

enter image description here

Is there a way to do this while having the HELLO (the section topic) show up properly?



  1. Set your list items to display inline-block like this they are being shown horizontally instead of vertically, you might want to add some additional margins and/or paddings to them.

    .nav li{
        display: inline-block


    Login or Signup to reply.
  2. Seems like you put correct CSS code on

    nav li a. {

    But you need to put this code on

    nav li {

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top