Bootstrap 5 wrap nav bar.

[Glyndwr Bartlett]

I wand my Bootstrap 5 nav to wrap until I get to a xs sized screen and then show the small screen pills. Currently it does not wrap and the menu disappears when xs; however, the pills do not appear. I have:

<nav id="myNavbarEP" class="navbar navbar-expand-lg navbar-expand-md navbar-sm navbar-xs navbar-light bg-light" style="display:none;">
      <div class="container-fuid"> 
        <div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
            <ul class="navbar-nav me-auto align-middle">
            	<li>
            		<a type="button" class="btn btn-colour1 nav-link dropdown-toggle align-middle" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
					<ul class="dropdown-menu">
						<li>
							<a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a>
						</li>
						<li>
							<a type="button" class="btn btn-colour1" href="ClinicWorkingDay.html">Clinic Working Days</a>
						</li>
						<li>
							<a type="button" class="btn btn-colour1" href="ClinicNonWorkingDate.html">Clinic Non Working Date</a>
						</li>
						<li>
							<a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a>
						</li>
					</ul>
				</li>
				
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a>
                </li>
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="CalendarSession.html">Calendar Session</a>
                </li>
                <li class="nav-item active">
                    <a type="button" class="btn btn-colour1" href="CalendarSessionSeries.html">Calendar Session Series</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a>
                </li>
                <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="ExerciseMachineAdmin.html">Exercise Machine Library</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="PatientExerciseAss.html">Exercise Prescription</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="SessionSelect.html">Gym Session</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="PatientIssues.html">Issues/Adverse Events</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-colour1" href="SessionSeriesAdmin.html">Session Series Admin</a>
                </li>
            </ul>
        </div>
        
        <div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
            <ul class="navbar-nav ms-auto">
            	<li class="nav-item">
                    <a type="button" class="btn btn-info" href="HelpEP.html">Help</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a>
                </li>
                <li class="nav-item">
                    <a type="button" class="btn btn-danger" href="Login.html">Log out</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

[Roland Mueller]

I don't have an answer but there is a typo in the name of the CSS class in line 2: container-fuid -> container-fluid
<div class="container-fluid">

[Glyndwr Bartlett]

Thank you Roland, I greatly appreciate you pointing that out to me.

Kind regards,

Glyn

[Glyndwr Bartlett]

This is what I ended up doing (the main thing was to add the flex-wrap class to the <ul>):

<nav id="myNavbarEP" class="navbar navbar-expand-lg navbar-expand-md navbar-sm navbar-xs navbar-light bg-light" style="display:none;">
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-menu" aria-controls="collapsibleEPNavbar" aria-expanded="false" aria-label="Toggle navigation">
  			<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse navbar-menu" id="collapsibleEPNavbar"> 
           <ul class="navbar-nav me-auto align-middle flex-wrap">
           	<li>
           		<a type="button" class="btn btn-colour1 nav-link dropdown-toggle align-middle" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
				<ul class="dropdown-menu">
					<li>
						<a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a>
					</li>
					<li>
						<a type="button" class="btn btn-colour1" href="ClinicWorkingDay.html">Clinic Working Days</a>
					</li>
					<li>
						<a type="button" class="btn btn-colour1" href="ClinicNonWorkingDate.html">Clinic Non Working Date</a>
					</li>
					<li>
						<a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a>
					</li>
				</ul>
			</li>
			
               <li class="nav-item active">
                   <a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a>
               </li>
               <li class="nav-item active">
                   <a type="button" class="btn btn-colour1" href="CalendarPatient.html">Calendar Patient</a>
               </li>
               <li class="nav-item active">
                   <a type="button" class="btn btn-colour1" href="CalendarSession.html">Calendar Session</a>
               </li>
               <li class="nav-item active">
                   <a type="button" class="btn btn-colour1" href="CalendarSessionSeries.html">Calendar Session Series</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a>
               </li>
               <li class="nav-item">
                  <a type="button" class="btn btn-colour1" href="ExerciseMachineAdmin.html">Exercise Machine Library</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="PatientExerciseAss.html">Exercise Prescription</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="SessionSelect.html">Gym Session</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="PatientIssues.html">Issues/Adverse Events</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-colour1" href="SessionSeriesAdmin.html">Session Series Admin</a>
               </li>
           </ul>
           
           <ul class="navbar-nav ms-auto flex-wrap">
           	<li class="nav-item">
                   <a type="button" class="btn btn-info" href="HelpEP.html">Help</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a>
               </li>
               <li class="nav-item">
                   <a type="button" class="btn btn-danger" href="Login.html">Log out</a>
               </li>
           </ul>
    </div><!-- /.navbar-collapse -->
</nav>