the navbar brand is in the collapsible section of the menu? why? why is the site brand name in the collapsible section? moving it outside of the collapsible tag causes an issue. Here is the full code

        <!--Navbar-->
        <nav class="navbar navbar-dark primary-color-dark">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
                <i class="fa fa-bars"></i>
            </button>

            <div class="container">
	        <!--Navbar Brand-->
                <a class="navbar-brand" href="http://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs left" id="collapseEx">
				
                    <!--Links-->
                    <ul class="nav navbar-nav" style="display:block;">
	
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </div>
                <!--/.Collapse content-->

            </div>

        </nav>
        <!--/.Navbar-->

and here's how it looks when the menu button is toggled but its all messed up, the brand and nav links are jumbled together and here is it supposed to look I think this issue needs to be resolved.

---