Логотип navbar опускается вниз, а кнопки неправильно сворачиваются

Question

Моя веб-страница отлично выглядит на настольных компьютерах, но имеет проблемы на мобильных устройствах.

1. Логотип опускается ниже панели навигации.
2. Кнопки не выравниваются при нажатии на кнопкугамбургер.
3. Текст Navbar становится невидимым (информация для входа)

Вот изображение рабочего стола:

Свернутое изображение:

Нажав на гамбургер:

Мне отчаянно нужна помощь. Это довольно много кода, и мне будет трудно следовать, мои извинения заранее.

<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

Я сделал это слишком сложным. В итоге я нашел адаптивный шаблон в Интернете и просто изменил значения в соответствии со своими потребностями.