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

CSS

Ian Bruce
Ian Bruce
10,940 Points
Posted by Ian Bruce
Ian Bruce
10,940 Points

Navbar keeps going vertical rather than horizontal. help please

I am building a simple Ruby application and I am on the page layout section where you use CSS. On the part where it was telling me how to create a navigation bar, I followed all of the instructions but still my not bar went vertical. someone help please. also, im trying to post the code on here but its not working ://

 <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container"> 
        <a href="#" class="brand"> The treebook</a>
        <ul class="nav">
          <li><%= link_to "All Statuses", statuses_path%></li>
          <li><%= link_to "All Statuses", statuses_path%></li>
          <li><%= link_to "All Statuses", statuses_path%></li>
        </ul>
      </div>
    </div>
  </div> 
  <div class="container">
      <%= yield %>
  </div>
</body>
</html>

Edited by Adam Sackfield to add correct Markdown for embedding code

5 Answers

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

Could you post the css? By default lists are vertical unless you tell them otherwise.

Ian Bruce
Ian Bruce
10,940 Points
Ian Bruce
Ian Bruce
10,940 Points

<!DOCTYPE html> <html> <style> .navbar {background-color: black; .brand {color: gray; font-family: Chalkduster;

    }

.All Statuses {color: gray; font-family: Chalkduster; }

</style> <head> <title>The Village</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a href="#" class="brand"> VILLAGE</a> <ul class="nav"> <li><%= link_to "All Statuses", statuses_path%></li> <li><%= link_to "All Statuses", statuses_path%></li> <li><%= link_to "All Statuses", statuses_path%></li> </ul>

  </div>
</div>

</div> <div class="container"> <%= yield %> </div> </body> </html>'''

Ian Bruce
Ian Bruce
10,940 Points
Ian Bruce
Ian Bruce
10,940 Points

''''<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a href="#" class="brand"> The treebook</a> <ul class="nav"> <li><%= link_to "All Statuses", statuses_path%></li> <li><%= link_to "All Statuses", statuses_path%></li> <li><%= link_to "All Statuses", statuses_path%></li> </ul> </div> </div> </div> <div class="container"> <%= yield %> </div> </body> </html>''''

Ian Bruce
Ian Bruce
10,940 Points
Ian Bruce
Ian Bruce
10,940 Points

cant seem to post the code. how do i do that? or could i just email you?

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

I realize you may not be that far in css. But using flexbox will be wayyyy easier. It's the only thing i do anymore.