Why the navbar items are not shown?

Question

I have the following code and except Mona Jalal and a white tiny button next to it in the top right nothing else shows:

<div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Mona Jalal</a>
            </div>

            <div class="collapse navbar-collapse" id="nav-main">
                <ul class="nav navbar-nav">
                    <li><a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a></li>
                    <li><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
                    <li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
                    <li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
                    <li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
                    <li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
                    <li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>

                </ul>
            </div>
        </div>

I had the following code first, which worked but when I made the screen width to much smaller, things got weird, so I decided to use a button that if you click on it shows the items (like in mobile or say the button you see in the right button corner of Chrome with three lines). The following code actually works but has that problem I said. I am a little lost so if you could give me hints to get going that'll be great :)

<div class="container">
    <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
        <div class="nav navbar-nav">
            <a class="nav-item nav-link page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link active 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>
</div>

Please let me know if you would need more details or if the question is not clear enough.

UPDATE: with the second example which is working, the problem is when I reduce the width of the screen it happens to be something like this, as I am new to bootstrap/CSS stuff I am not sure what is the correct terminology to describe the problem but I guess the photos show it best!

Answer 1

This could be caused by the 'collapse navbar-collapse' CSS classes applied to the 'nav-main' div. Have a look at the bootstrap documentation and see if any of the important notes regarding default navbars (http://getbootstrap.com/components/#navbar-default) apply in your case.