bootstrap hambuger menu - menu items will not display unless hamburger button is pressed

Question

I am implementing a hamburger menu with bootstrap and following the generic code from the boot strap site, HOWEVER, as soon as I use <ul> tags, my menu items only appear when I hit the hamburger button.

This means that when I resize the page from 300px to 1200px, the hamburger button doesn't change back to the inline menu, but stays as a button the whole time.

Has anyone ever had this issue?

ps. I've noticed that when I remove the <ul> and <li> tags from the script, the menus appears normally in a horizontal fashion.

menu WITHOUT ul or li tags

menu WITH ul or li tags

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="nav navbar-nav">
                    <li><a  href="../index.php">Home</a></li>
                    <li><a  href="index.php">Dashboard</a></li>
                    <li><a  href="add_post.php">Add Post</a></li>
                    <li><a  href="add_category.php">Add Category</a></li>
                    <li><a  href="uploadFile.php">Upload File</a></li>
                    <li><a  href="logout.inc.php">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>