php - 导航栏 Logo 下降且按钮未正确折叠

Question

我的网页在台式机上看起来不错，但在移动设备上却有问题。

1. Logo 下降到导航栏下方。
2. 当我点击汉堡包时，按钮没有对齐。
3. 导航栏文本变得不可见(登录信息)

这是桌面图片:

折叠图像:

点击汉堡:

我迫切需要一些帮助。这是相当多的代码，我很难理解，我提前道歉。

<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

我把它弄得太复杂了。我最终在网上找到了一个响应式模板，只是更改了值以满足我的需要。