
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

    <!-- Navbar toggler (Bootstrap 4 & 5 compatible) -->
    <button class="navbar-toggler" type="button" 
            data-toggle="collapse" data-target="#navbarCollapse" 
            data-bs-toggle="collapse" data-bs-target="#navbarCollapse" 
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto" style="display: inline-flex"> <!-- 'ml-auto' works in Bootstrap 4 & also acceptable in 5 -->
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="index.php">home</a></li>
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="location.php">Location</a></li>
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="maintenance.php">Maintenance</a></li>
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="task.php">Task</a></li>
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="work-order.php">Work Order</a></li>
            
            <li class="nav-item"><a style="font-size: 16px; padding: 8px;" class="nav-link" href="logout.php">Logout</a></li>            
        </ul>
    </div> 
</nav>
