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

WordPress

Jeffrey Alberini
Jeffrey Alberini
4,883 Points
Posted by Jeffrey Alberini
Jeffrey Alberini
4,883 Points

Why does my Bootstrap Navbar rearrange when it collapses?

On my navbar, I have sections for About, Services, Contact and a button. The btn-danger is set navbar-right.

In my mind, when it would collapse in the order it shows up on the actual site.

When my navbar collapses it rearranges. The new order becomes: btn-danger, About, Services and Contact.

Any help on this matter would be great!

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

can you post the HTML for your nav bar. My guess it that your .btn-danger is declared before you links and that is why its showing up first.

5 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Try this:

<div class="container">
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">   
        <?php wp_bootstrap_main_nav(); // Adjust using Menus in Wordpress Admin ?>  
        <?php //if(of_get_option('search_bar', '1')) {?>
        <?php //} ?> 

        <button type="button" class="navbar-right btn btn-large btn btn-danger navbar-btn">
          Request Quote
        </button> 
    </div>
</div> <!-- end .container -->
Jeffrey Alberini
Jeffrey Alberini
4,883 Points
Jeffrey Alberini
Jeffrey Alberini
4,883 Points

I did try this before posting a question and again after you posted the answer. Thank you, but it makes the btn not even show up in the collapse menu. it is very strange.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

What version of bootstrap are you using?

Jeffrey Alberini
Jeffrey Alberini
4,883 Points
Jeffrey Alberini
Jeffrey Alberini
4,883 Points

WP Bootstrap from 320press.com

Jeffrey Alberini
Jeffrey Alberini
4,883 Points
Jeffrey Alberini
Jeffrey Alberini
4,883 Points

Bootstrap – Built on v.3.0.3

Jeffrey Alberini
Jeffrey Alberini
4,883 Points
Jeffrey Alberini
Jeffrey Alberini
4,883 Points 
<div class="container">
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">   
</button>
 <button type="button" class="navbar-right btn btn-large btn btn-danger navbar-btn">
      Request Quote
      </button> 
<?php wp_bootstrap_main_nav(); // Adjust using Menus in Wordpress Admin ?>  
<?php //if(of_get_option('search_bar', '1')) {?>
<?php //} ?>    
</div>
</div> <!-- end .container -->