navbar logo dropping down and buttons not collapsing properly

Question

My web page looks great on desktops, but has problems on mobile.

1. The logo drops down below the navbar.
2. The buttons are not in alignment when I click on the hamburger.
3. Navbar text becomes invisible (login information)

Here is desktop image:

Collapsed image:

Clicking on hamburger:

I desperately need some help. It's quite a bit of code and my be difficult to follow, my apologies in advance.

<nav class="navbar navbar-expand-md navbar-header bg-dark navbar-dark">
    <a class="navbar-left" href="./"><img src="logo_edit.png" height="120" class=navbar-logo></a>
    <a class="navbar-brand navbar-brand-fix" href="./"> TruckTRAC</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <button class="btn btn-sm btn-primary navbar-btn" OnClick="btnClick('main_map.php')" id="show_map"><i class="fas fa-globe-americas"></i> View Map</button>
            <ul class="navbar-nav mr-auto" style="padding-left:20px;">

                <?php
                   //Only show the manage companies and manage users options in tools menu if the user has admin access
                    if(isset($_SESSION['logged_in']) && $_SESSION['admin'] == '1') {

                        echo '<div class="dropdown">
                                <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><i class="fas fa-hammer"></i> Tools
                                <span class="caret"></span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'companies_table_html.php'" .')">Manage Companies</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'users_table_html.php'" .')">Manage Users</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'drivers_table_html.php'" .')">Manage Drivers</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'trucks_table_html.php'" .')">Manage Trucks</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'trailers_table_html.php'" .')">Manage Trailers</a>  
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'contacts_table_html.php'" .')">Manage Contacts</a>
                                </div>
                            </div>';
                    }



                    //transporter accounts can see everything except "manage companies" and "manage users"
                    if(isset($_SESSION['logged_in']) && $_SESSION['admin'] == '0' && $_SESSION['transporter'] == '1') {

                        echo '<div class="dropdown">
                                <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><i class="fas fa-hammer"></i> Tools
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'companies_table_html.php'" .')">My Account</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'drivers_table_html.php'" .')">Manage Drivers</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'trucks_table_html.php'" .')">Manage Trucks</a>
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'trailers_table_html.php'" .')">Manage Trailers</a>  
                                    <a class="dropdown-item" href="#" OnClick="btnClick('. "'contacts_table.html'" .')">Manage Contacts</a>
                                </ul>
                            </div>';
                    }   
                ?>

            </ul>
            <ul class="nav navbar-nav navbar-right">     
                <li class="nav-item">
                    <?php
                        if(isset($_SESSION['logged_in'])) {
                            echo '<span class="navbar-text">' . $_SESSION["display_name"] . ' | ' . $_SESSION['company'] . '</span>';
                        }else{
                            echo '<span class="navbar-text">Welcome Guest | ' . $_SESSION['company'] . '</span>';   
                        }
                    ?>
                </li>
            </ul> 
            <?php
                if(isset($_SESSION['logged_in'])) {
                    echo '<a href="logout.php" style="padding-left: 20px;">'; 
                    echo '<button type="button"  class="btn btn-sm btn-danger"><i class="far fa-user"></i> Logout</button>';
                    echo '</a>';
                }else{
                    echo '<a href="login.php" style="padding-left: 20px;">'; 
                    echo '<button type="button"  class="btn btn-sm btn-danger"><i class="far fa-user"></i> Login</button>';
                    echo '</a>'; 
                }
            ?>       
        </div>  
    </nav>

Answer 1

I had made this too complicated. I ended up finding a responsive template on the web and just changed the values to suit my needs.