I have been struggling for quite some time to create a mobile menu using Bootstrap 4. My goal is to display the 3 brand names and the toggle button on the same row in the mobile menu. However, when I click the toggle button, the 3 brands end up below the collapsed menu. I want the 3 brands to remain at the top in a single row along with the toggle button even after the menu collapses. The issue lies in the fact that the collapsing menu is taking up 100% of the column width, which is causing the 3 brands to be pushed down below the menu. Any assistance would be greatly appreciated.
Solution Objective
https://i.sstatic.net/TJxDA.jpg
HTML Code
<body id="page-top">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-1</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-2</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-3</a>
</div>
</div>
</div>
</nav>
</body>