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 Framework Basics Prototyping with Bootstrap Building a Header, Navigation, and Jumbotron Component

Posted by Daniel Horowitz
Daniel Horowitz
Courses Plus Student 7,305 Points

How can I make the pill style navigation collapse into a vertical column navigation for smaller screen sizes?

I've tried almost all of the samples on Bootstrap's website. I cannot seem to make it work. Can anyone help me with this? i really like the pill look of the navigation, however when I decrease the screen size, it just stacks all the pills a few on top of a few.

emmanuel medina
emmanuel medina
2,691 Points
emmanuel medina
emmanuel medina
2,691 Points

Can you put your code and link to a screenshot with the problem

2 Answers

Daniel Horowitz
Daniel Horowitz
Courses Plus Student 7,305 Points

I think I figured it out. Only way I could get it to work was to put the pills inside a navbar. I'm ok with that, I think it looks good. Looks better when it drops to a smaller screen size, to stack the pills. A little css helps line everything up in the center. Feel free to share any ideas to make this better if you have any. Thanks.

<div class="container">
    <div class="row">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <!--<span class="icon-bar"></span>-->
                        <!--<span class="icon-bar"></span>-->
                        <!--<span class="icon-bar"></span>-->
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                    <a class="navbar-brand" href="#">Hannah</a>
                </div>

                <div class="navbar-collapse collapse" id="collapse-1" aria-expanded="false">
                    <ul class="nav nav-pills" id="main-nav">
                        <li role="presentation" class="active"><a href="#">Home</a></li>
                        <li role="presentation"><a href="#">Top 10 Songs</a></li>
                        <li role="presentation"><a href="#">My Programming</a></li>
                        <li role="presentation"><a href="#">Softball</a></li>
                        <li role="presentation"><a href="#">DIY's</a></li>
                        <li role="presentation"><a href="#">My Dogs</a></li>
                        <li role="presentation"><a href="#">All About Me</a></li>
                        <li>
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default pull-right">Submit</button>
                            </form>
                        </li>
                    </ul>
                </div>
            </nav>
        </div><!-- end row -->
</div><!-- end container -->

And this is the JQuery that checks for the screen size and adds the class 'nav-stacked' when its below 768px width

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 768) {
        $('#main-nav').addClass('nav-stacked');
    } else {
        if (!init) {
            $('#main-nav').removeClass('nav-stacked');
        }
    }
}

$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});

Here is the css

#main-nav li:not(:last-child) {
    padding-top: 5px;
}
Daniel Horowitz
PLUS
Daniel Horowitz
Courses Plus Student 7,305 Points
Daniel Horowitz
Daniel Horowitz
Courses Plus Student 7,305 Points

Another thing I noticed... When I 

console.log($(window).width());

I found that what JQ thought was the window width was not exactly right, it was off by 17px. So the console showed 975px width, when Dev Tools showed the window width at 992px. Something to keep in mind if you're wanting this JQuery code to activate at the same time the @media queries do. I ended up using the following code...

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 751) {
        $('#main-nav').addClass('nav-stacked');
        $('#logo').empty();
        //console.log($(window).width());
    } else if ($(window).width() > 750){
        if (!init) {
            $('#main-nav').removeClass('nav-stacked');
            $('#logo').html('<a class="navbar-brand" href="index.html"><img class="logo" src="img/New_AMSI_Logo_200px.png" /></a>');
            //console.log($(window).width());
        }
    }
}