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

Posted by Nadia Brown
Nadia Brown
8,563 Points

Twitter Navigation Menu

I'm using a html5up template for a website I'm working on. I've included bootstrap, but I'm unable to get the navigation to function propertly. I rewatched the Frameworks Foundations tutorial, but I am still stuck. When I add the navbar-right class to my unordered list it doesn't float my ul to the right. I'm not sure what I should do. 

<div class="navbar navbar-invere navbar-fixed-top">
   <div class="container">
       <a class="navbar-brand text-muted" href="#">Example Website</a>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    </div>
</div>

2 Answers

Geoffrey Powell
Geoffrey Powell
15,358 Points
Geoffrey Powell
Geoffrey Powell
15,358 Points

Have you checked to see if the rule is being overwritten somewhere, for instance in another stylesheet or in-line?

Nadia Brown
Nadia Brown
8,563 Points

Thank you for the suggestion Geoffrey. That was one of the first steps I took to see if I could resolve this problem, and as far as I could tell it was not being overwritten, but I will take a second look.

Sean Perryman
Sean Perryman
13,810 Points
Sean Perryman
Sean Perryman
13,810 Points

Try this out:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container navbar-inner">
    <div class="navbar-header">
      <a class="navbar-brand text-muted" href="#">Example Website</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Switched your wrap div with a nav tag, fixed the inverse spelling, and added the navbar-header wrapper around the brand. This is how I have my app set up and the navbar-right works for me.