Navbar add an overlap

Navbar add an overlap

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>

        <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 class="nav-item">
                    <a class="nav-link" href="client.html">Client</a>
                <li class="nav-item">
                    <a class="nav-link" href="/users">Utilisateur</a>
                <li class="nav-item">
                    <a class="nav-link" href="/template">Template</a>

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

    <table data-toggle="table">
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <td>Item 1</td>
                <td>Item 2</td>

result give

enter image description here

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
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.