Bootstrap 4.5.0: My Toggle Button Appears Just to the Right of my Brand Image/Name?How Do I Position it to the Left? - css

Question

I have a problem where the toggle button appears just to the right of my brand image. The same thing happens if I use a brand name. This is what it looks like.
I want the toggle to look like this.
I have searched for solutions but all of them are dealing with earlier versions of Bootstrap. I started having the problem when I upgraded the Bootstrap gem to 4.5.0.
Here is my html code.
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fas fa-bars"></i>
</button>
<%= link_to image_tag("ibraini_navbar.png", class: "img-fluid navbar-brand", alt: "#{t :page_title_home}"), home_path %>
</div>
Here is the related CSS code. I didn't include the code where I set the height of the navbar to adjust the size of the image.
.navbar-custom .navbar-brand, .navbar-custom .navbar-header, .navbar-custom .navbar-nav { a { color: $linkColorHeader; } a:hover, a:focus { text-decoration: none; color: $linkColorHover; } }
.navbar-custom .navbar-toggler { color: $linkColorHover; #include font-size(24px); border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #599ed7; color: $linkColorHeader; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active, .navbar-custom .navbar-brand:focus { outline: 0; }
I have the same problem if I use a brand name. The toggle is still positioned just to the right of the name.
I have similar html and css code in the other program that is working like the second picture.
I checked the current documentation and it says that the toggle goes to the left by default which is what I want. I have never had this problem with a toggle. Hopefully there is something that I'm not seeing that can be easily fixed.

Answer 1

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand text-light" href="#">
<img src="" alt="logo-here" style="width:40px;"> Brand Name
</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="#">Link Here</a>
</li>
</ul>
</div>
</nav>

Answer 2

I took another look at the Bootstrap documentation. I realized that class 'navbar-header' no longer exists in Bootstrap 4.5.0. I rewrote my markup to look like the documentation found here.
The markup in my question is gone. Here is my new code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<%= link_to locale_root_path(anchor: "overview"), class: "navbar-brand page-scroll" do %>
<span class="text-red">Light</span><span class="text-blue">Be Corp</span>
<% end %>
......
</div>
</nav>
I have the toggle to the left without the brand name as expected. All of my websites will need to be modified. That's why my second image shows the brand name.