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

Boostrap Navbar collapse is not working properly

Here is my code:

<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">
<div class="nav navbar-nav navbar-right">
<a href="http://struthersmetalserviceinc.com/request-quote" class="btn btn-danger">REQUEST QUOTE</a>
</div>
                        <?php wp_bootstrap_main_nav(); // Adjust using Menus in Wordpress Admin ?>

                        <?php //if(of_get_option('search_bar', '1')) {?>

                        <?php //} ?>
                    </div>

                </div> <!-- end .container -->
            </div> <!-- end .navbar -->

        </header> <!-- end header -->

        <div class="container">

When i look at it on my iphone and click the dropdown, the red button is underneath it to the right. The pages on the dropdown is actually under a slideshow on a z-index, which I did not change anything. So clueless.

Also, my footer has a background color, when i start to collapse that the background color and all the styling to the links go away????WHAT????

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

Jeffrey, I understand that you might be frustrated, but your post doesn't ask a specific question. Do you mind explain the problem a little more?

2 Answers

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

fixed. sorry for not being clearer. I do have a new question, but I will create a new post.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Jeffrey,

It's hard to tell what's going on with just the snippet of code that you posted here. Is there a site I can look at to investigate further?

I recently did a Bootstrap-to-WordPress project and had to write a lot of css and rework some of my other code to fix the collapsible menus. Wordpress adds a lot of extra markup to your menu and when you collapse it...bootstrap uses javascript to add some more classes, etc. It caused me a lot of problems. In particular, I remember it adding an in class...which conflicted with a class I'd set up for the state of Indiana. Maybe something similar is happening to you.