CSS

navbar for front-end

<nav class="navbar navbar-expand-lg navbar-light bg-light shaow-sm ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse px-5" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item d-flex">
                
                <a class="nav-link text-dark font-weight-bold" href="index.php">System</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class=' nav-item'>
                <div class="dropdown">
                    <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"
                        style='background-color: #2F4F4F !important; color: white !important;'>

                        <img src="asset/image/userr.png" alt="" style='width: 30px'>
                        My account
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="login.php?clear=true">
                            <img src="asset/image/logout.png" alt="" style='width: 20px'>
                            Logout</a>
                    </div>
                </div>

            </li>
        </ul>
    </div>
</nav>