Bootstrap mobile menu wont stay open

First question here, thank you for your patience.

I looked for a similar question and was surprised I didn't find one honestly.

I learned enough to create a fiddle for this as well. You can see it here

https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/

HTML

<body>
<div class="container-fluid">
    <div class="row yellow container-fluid">    <!-- YELLOW NAV ROW -->
        <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
            <div>
                <img src="logo.jpeg" alt="logo" title="logo" width="100px" height="100px" class="my-image">
            </div>
        </div>
        <div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
            <div class="jer-margin-left">
                <div class="header-title">My Bootstrap Site</div>
                <div class="header-slogan">And its navbar problem...</div>
            </div>
        </div>
        <div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
            <div>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-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>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav jer-nav">
                                <li class="jer-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">ABOUT US</a></li>
                                <li><a href="#">SERVICES</a></li>
                                <li><a href="#">FORMS</a></li>
                                <li><a href="#">CONTACT US</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>
    </div>  <!-- END YELLOW NAV ROW -->
</div>  <!-- END CONTAINER -->  

CSS

[hidden] {
  display: none;
}

* {
    box-sizing: border-box;
}

.yellow {
    background-color: rgb(253, 232, 104);
    width: 100%;
}

.my-image {
    margin: 10px;
}

.jer-margin-left {
    margin-left: 15px;
}

.header-title {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 30px;
    margin: 20px 0 0 0;
}

.header-slogan {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 22px;
}

.no-left-margin {
    margin-left: -70px;
}

.navbar-default {
    background-color: rgb(253, 232, 104);
    border-color: rgb(253, 232, 104);
    padding-top: 20px;
}

.jer-nav {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    text-transform: uppercase;
    float: right;
}

.navbar-default .navbar-nav>li>a {
    color: #000;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    margin: 0;
}

.jer-active {
    border: silver solid 1px;
    background-color: rgb(253, 232, 104);
}

@media (max-width: 420px) {
    .jer-margin-left {
        margin-left: 65px;
    }
}

@media (max-width: 600px) {
    .header-title {
        font-size: 22px;
    }

    .header-slogan {
        font-size: 15px;
    }

    .jer-margin-left {
        margin-left: 45px;
    }
}

@media (max-width: 1200px) {
    .ph-float-right {
        float: none;
        margin-right: 0;
    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Reduce the size of the output window to force the mobile menu. (instead of the horizontal text menu)

ISSUE 1: To open the mobile menu I am required to click on it twice. That is the first issue.

ISSUE 2: It will not stay open.

In setting up the fiddle I came to believe that its a css issue as when all of the css was stripped away it works as hoped. If I setup the fiddle properly, MY css is in the css window, and the stock bootstrap css is coming in through the external resources options in jsfiddle.

Thank you very much for looking.