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 Stu Cowley
Stu Cowley
26,287 Points

Incorrect Positioning of Bootstrap Dropdown Menu When The '.navbar-right' Class is Used

Hey guys,

So I am building a site that is built around the Bootstrap framework. Now my client now wants me to add a dropdown menu to the navbar. I have been able to do this all ok I have utilized the Navbar navigation bar with a few links on it. I am using the following classes in the navbar:

  • navbar
  • navbar-default
  • navbar-fixed-top

And for the dropdown menu:

  • nav
  • navbar-nav
  • navbar-right

When I view the site the dropdown menu is floating to the left instead of to the right as anticipated. I know the issue with this is because I have declared the class .navbar-right and it would naturally push the dropdown menu to the right, it's just I don't know how to work around this, and I need some advice on how I can achieve this. I will include the HTML code (I am using PHP for the site) that I am using for the navbar:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="index.php"><?php echo $navName; ?></a>
        </div>

        <div class="collapse navbar-collapse" id="main-nav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.php">Home</a></li>
                <li><a href="news.php">News</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Fixture <b class="caret"></b>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="fixture/division-one.php">Division One</a></li>
                        <li><a href="fixture/division-two.php">Division Two</a></li>
                    </ul>
                </li>
                <li><a href="results.php">Results</a></li>
                <li><a href="ladders.php">Ladders</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="documents.php">Documents</a></li>
                <li><a href="contacts.php">Contacts</a></li>
            </ul>
        </div>
    </div>
</nav>

I have also included a screen shot of the issue that I'm having if I have made no sense, you can find it here.

I might tag Guil Hernandez in this too.

Thanking you all in advance,

Stu :)

1 Answer

Addison Legere
Addison Legere
11,587 Points
Addison Legere
Addison Legere
11,587 Points

To start, you may want to close your <a> tag. This line : li class="dropdown"...

Stu Cowley
Stu Cowley
26,287 Points

Already done.