Logo and Hamburger Menu in Bootstrap - bootstrap-5

Question

I am trying to get my logo and hamburger menu for smaller screens to display side-by-side. On my desktop, when I make my window smaller, the hamburger menu is still to the right of the logo:
But from my phone, it appears like this:
I would like to make the logo about 10% smaller (or more) and have the hamburger menu appear on the right of it from my phone. I don't know what I'm missing here. Here's some of my code:
<nav
class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between"
>
<a href="/" class="navbar-brand text-light"
><img
src="/static/hopps-hunter_logo.png"
alt="Hopps Hunter"
class="img-responsive"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggler"
aria-controls="navbarToggler"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
{% if not g.user %}
<li class="nav-item">
<a
class="nav-link pr-3 text-light"
href="/user/login"
>Login</a
>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/user/signup"
>Sign Up</a
>
</li>
I have tried various things with the bootstrap classes and styles, but can't get it to display properly on my phone.

Answer 1

Just add width="30" or whatever and height="auto" inside the img tag like this:
<a href="/" class="navbar-brand text-light">
<img src="/static/hopps-hunter_logo.png" alt="Hopps Hunter" class="img-responsive" width="30" height="auto" />
</a>
Automatically the hamburger menu will be on the right side responsively.