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 Craig Watson
Craig Watson
27,930 Points

Bootstrap Nav Help!

Hi everyone!

I'm currently on coding a nav with bootstrap, I'm having a couple of teething problems when I try to use the responsive classes....

Here is the site in workspaces

Plus here is the raw html of the nav.......

    <!--Navbar -->
    <div class="navbar navbar-default navbar-fixed-top" id="navigation-bar">
        <!--Navbar Container -->
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
            </div>

            <a class="main-logo pull-left" href="index.html">
                <img src="img/brand.png" id="brand-img">
            </a>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav nav-pills pull-right" id="navigation-links">
                    <li role="presentation" class=""><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">About</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Web Design <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>


                    <li role="presentation"><a href="#">Graphic Design</a></li>
                    <li role="presentation"><a href="#">Blog</a></li>
                    <li role="presentation"><a href="#">Contact</a></li>
                </ul>

            </div>

        </div>
        <!-- End Navbar Container-->
    </div>
    <!-- End Navbar -->

Any advice / help is appreciated

Thanks Craig

1 Answer

Alex Friant
Alex Friant
6,444 Points
Alex Friant
Alex Friant
6,444 Points

Well, if you are talking about how when the width goes below 768px the menu bleeds down into the jumbo tron area, you can just add your own media query to change the #navigation-links top margin.

As it is currently, that top margin stays at 20px when the menu gets expanded, making it 20px below that horizontal menu line. What you need to do is reduce that margin during that situation.

This is what I suggest, it seems to look nice. Add this to the bottom of your "my-styles.css":

@media (max-width: 767px) {
    #navigation-links {
        margin-top: -5px;
    }
}
Alex Friant
Alex Friant
6,444 Points

You'll have to keep tweaking things though as the width continues to shrink. I'll leave that part up to you, but it might have to done with some nth-child float psuedo selectors so that the menu wraps in even chunks. Also, you'll have to maybe add a new class for that entire upper menu div so that the height expands as the menu wraps. But you could take other approaches too, I guess.