Make bootstrap 5 dropdowns same width as navbar

Viewed 24

I have a bootstrap dropdown that I want to make the same width as the navbar. Instead of it going 100% the width of the navbar, it's going 100% the width of the screen. I've tried everything I can think of and I can't get it to be the width of the navbar. Any help would be greatly appreciated. Thanks!

enter image description here

<ul class="nav nav-tabs" id="billet-management-tabs" role="tablist">
    
    <li class="nav-item" id="dashboard-nav-item" role="presentation">
        <button id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard-content" class="nav-link" type="button" role="tab">Dashboard</button>
    </li>
    <li class="dropdown-start">
        <div class="dropdown ">
            <div class="nav-item" id="positions-nav-item" role="presentation" data-bs-toggle="dropdown">
                <button id="positions-tab" data-bs-toggle="tab" class="nav-link dropdown-toggle" aria-haspopup="true" type ="button">Positions</button>
            </div>
            <ul class="dropdown-menu" aria-expanded="false">
                <li class="dropdown-item" id="billets-nav-item" role="presentation" data-bs-toggle="tab">
                    <button id="billets-tab" data-bs-toggle="tab" data-bs-target="#billets-content" class="nav-link" aria-haspopup="true" type="button" role="tab">Billets</button>
                </li>
                <li class="dropdown-item" id="position-descriptions-nav-item" role="presentation">
                    <button id="position-descriptions-tab" data-bs-toggle="tab" data-bs-target="#position-descriptions-content" class="nav-link text-left" type="button" role="tab">Position Descriptions</button>
                </li>
                <li class="dropdown-item" id="staffing-actions-nav-item" role="presentation">
                    <button id="staffing-actions-tab" data-bs-toggle="tab" data-bs-target="#staffing-actions-content" class="nav-link" type="button" role=tab>Staffing Actions</button>
                </li>
                <li class="dropdown-item" id="labor-categories-nav-item" role="presentation">
                    <button id="labor-categories-tab" data-bs-toggle="tab" data-bs-target="#labor-categories-content" class="nav-link" type="button" role="tab">Labor Categories</button>
                </li>
                <li class="dropdown-item" id="staffing-action-nav-item" role="presentation">
                    <button id="staffing-action-tab" data-bs-toggle="tab" data-bs-target="#staffing-action-content" class="nav-link" type="button" role="tab">Staffing Action</button>
                </li>
                <li class="dropdown-item" id="staffing-matrix-nav-item" role="presentation">
                    <button id="staffing-matrix-tab" data-bs-toggle="tab" data-bs-target="#staffing-matrix-content" class="nav-link" type="button" role="tab">Staffing Matrix</button>
                </li>
            </ul>
        </div>
    </li>
  </ul>

.dropdown-item {
    color:#F8F8F8;
}


.dropdown-item:active {
    background-color: #006bb5;
}

.dropdown-item:hover {
    background-color: #0054b5;
    color: #F8F8F8;
}

.nav-link {
    width: 100%;
    color: #F8F8F8;
    border: none;
    font-weight:600;
    font-size:1.2rem;
    padding-left:25px;
    padding-right:25px;
}


.nav-link:focus {
    color: #F8F8F8;
}

.nav-link:hover {
    border: none;
    color:#F8F8F8;
    margin-bottom: -1px;

}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #006bb5;
    color: #F8F8F8;
   
}

.nav-tabs .nav-link{
    border-radius:0;
    border:0;
}

.dropdown-menu {
    padding: 0px;
    margin: 0px;
    background-color: #006bb5;
    border-radius: 0;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.75);
}

.dropdown-nav {
    list-style: none;
    padding: 0px;
    margin:0px;
}

.nav {
    background-color: #131523;
}



.nav > li > .dropdown  {
    position: static;
}

.nav li .dropdown > .dropdown-menu.show{
    width:100%;
    display:flex;
}

0 Answers
Related