There was a lack of information regarding the positioning of text on smaller screens. It is assumed that the desired placement is at the top of #my-navbar.
To address this issue, I propose creating an additional .navbar-collapse to house the text and modifying the navbar-toggler to target the new .navbar-collapse.
HTML Structure (Bootstrap 4.1)
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
</div>
</nav>
For small screens, the existing structure effectively aligns all elements due to Bootstrap setting flex-basis: 100%; on .navbar-collapse. However, it is necessary to set display:flex; on .navbar-header for proper alignment of branding and toggler:
.navbar-header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
flex-grow: 1;
}
https://i.sstatic.net/S9db6.png
On large screens, since Bootstrap already applies justify-content:space-between; to .container-fluid, the elements are correctly positioned. To center the text and right-align the menu, customizable CSS classes or Bootstrap utility classes like justify-content-center and justify-content-end can be used:
<div class="collapse navbar-collapse justify-content-center">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
https://i.sstatic.net/2uSUQ.png
fiddle: https://jsfiddle.net/aq9Laaew/175839/