Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Posted by Marwa zada
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points

Nav bar items stacked in new Bootstrap, unable to display them horizontally

I haven't been able to find any information or documentation on why the nav bar shows up stacked on the new version of Bootstrap. Here's the code I have in my application erb and a screenshot of how it's displayed.

alt text

                                   <div class="navbar navbar-fixed-top navbar-inverse">
                        <div class="navbar-inner">
                            <div class="container">
                                    <a href="#" class="brand">BTCustomizer</a>
                                    <ul class="nav">
                                        <li><%= link_to "All Statuses", statuses_path %></li>
                                        <li><a href="#">Item 2</a></li>
                                    </ul>
                            </div>
                        </div>
                </div>

                    <div class="container">
                        <%= yield %>
                    </div>

4 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You are not following BS3 conventions. It appears you have some BS2 mixed in there.

Is this what you wanted?

http://codepen.io/kevink/pen/avhlL

Marwa zada
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points

Yes, thank you

Ritesh Gupta
Ritesh Gupta
1,239 Points

Kevin wins.

Ritesh Gupta
Ritesh Gupta
1,239 Points
Ritesh Gupta
Ritesh Gupta
1,239 Points

Hey!

Try this?

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <a href="index.php"><img src="/logo.png" id="logo" /></a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="" id="menu-contact"><a href="#contactmodal" role="button" data-toggle="modal">LINK #1</a> </li>
          <li class="" id="menu-about"><a href="#myModal" role="button" data-toggle="modal">LINK #2</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Marwa zada
seal-mask
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points
Marwa zada
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points

Looks like if you indicate <ul class="nav nav-pills"> rather than just nav, it will not stack the list items but there must be another way around this. What if I didn't want pills and I just wanted my list items displayed horizontally across the navigation?

Aside from editing the CSS, does the current version of Bootstrap allow it?

Marwa zada
seal-mask
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points
Marwa zada
.a{fill-rule:evenodd;}techdegree
Marwa zada
UX Design Techdegree Student 15,460 Points

Thanks man but I'm not looking to make a collapsed navigation. I want to lay out the nav list items side by side horizontally. Older versions of bootstrap did that with the code I pasted above but this new version doesn't. I'm fairly certain my code is right and I've searched through Bootstraps documentation to find any information on it but even the example navigations and code displayed the nav horizontally.