Navbar Add An Overlap

Contents hide

Problem Description:

I use bootstrap 5.2

main part seem hided by the nav part a kind of overlap

<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar">
    <div class="container-fluid">
        <a class="navbar-brand logo" href="#">Doc</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
            <span class="visually-hidden">Togglenavigation</span>
            <span clasn="navbar-toggler-icon"></span>
        </button>

        <div id="navcol-1" class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="client.html">Client</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/users">Utilisateur</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/template">Template</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="container" id="main" role="main">
    <button type="button" class="btn btn-primary">Add a new userr</button>

    <table data-toggle="table">
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
            </tr>
        </tbody>
    </table>
</main>

result give

I can add to the main:

margin-top: 60px;

but surely this is a cleaner way?

Solution – 1

Just change fixed-top to sticky-top

Rate this post