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

Mona Jalal
Mona Jalal
4,302 Points
Posted by Mona Jalal
Mona Jalal
4,302 Points

how should I fix navbar so it would work properly in mobile like showing only one button?

<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
    <div class="nav navbar-nav">
        <a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link page-item" href="education.html">Education</a>
        <a class="nav-item nav-link page-item" href="coursework.html">Coursework</a>
        <a class="nav-item nav-link page-item" href="teaching.html">Teaching</a>
        <a class="nav-item nav-link page-item" href="projects.html">Projects</a>
        <a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a>
        <a class="nav-item nav-link page-item" href="experience.html">Experience</a>
        <a class="navbar-brand pull-sm-right m-r-0" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-2" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-4" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-6" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-8" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a>
        <a class="navbar-brand pull-sm-right m-r-10" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a>
    </div>
</nav>

Here's what I have. Please let me know what to add

3 Answers

Philip Gales
Philip Gales
15,193 Points
Philip Gales
Philip Gales
15,193 Points

You can always cheat by looking at other websites, but I would recommend add the 3 lines icon and hide it with a media query. When it is a small screen, unhide it and then style the mobile menu.