Twitter Bootstrap Question posted in

Twitter bootstrap – Extra text in `nav`

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>HELLO</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

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?

Tags:

2

Answers


  1. 0

    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
}

    jsfiddle

    Login or Signup to reply.
  2. 0

    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
Search