My issue is with the toggle button placement, as it always appears slightly to the right of my brand image. The same issue occurs when using a brand name. This is the current layout:
https://i.sstatic.net/zdvN0.jpg
I would like the toggle to be positioned like this instead:
https://i.sstatic.net/Mj5pJ.jpg
I have tried looking for solutions, but most resources address earlier Bootstrap versions. The problem started after updating to Bootstrap gem 4.5.0.
Below 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>
And here is the relevant CSS code. I omitted the part where I adjust the navbar height based on the image size:
.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; }
The issue persists even when using a brand name - the toggle still aligns with the name. Interestingly, a different program with similar HTML and CSS displays the toggle correctly like in the second image provided.
I consulted the latest documentation which states that by default, the toggle should appear on the left side, which is my desired positioning. This problem is new to me as I've never encountered it before with toggles. Hopefully, there's a simple fix I'm overlooking.