Bootstrap 4 HTML Navbar Icon Text - html

Question

Guys I am trying to get my head around the navbar and I cant for the life of me work this one out
I use the following code to make the navbar
<!-- Fixed navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
Menu<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Barr Custom Printing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
Garments <span class="caret"></span>
<ul class="dropdown-menu">
<li>T-Shirt</li>
<li>Sweatshirt</li>
<li>Polo Shirt</li>
<li>Hoodies</li>
<li>Sports Vests</li>
<li>Oversize</li>
<li>Organic</li>
<li>Sublimation</li>
</ul>
</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
This results in the following image on the left
Any Idea how I get it to look like the one on the right
I have tried mucking about with the CSS but just don't know what to try
Any Help Appreciated
Mark

Answer 1

So here it is. I used flexbox to align items.
just add following html
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="text">Menu</span>
<div class="iconWrapper">
<span class="navbar-toggler-icon"> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</button>
<a class="navbar-brand" href="#">Barr Custom Printing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
And the following css :-
.custom-toggler {
display: flex;
align-items: center;
}
.text {
margin-right: 10px;
}
Live example :-
https://jsfiddle.net/DTcHh/67566/