I'm struggling to maintain the position of the dark mode toggler when collapsing. I am utilizing bootstrap but open to using custom css. I attempted moving the toggler outside of the collapse and above the title, however it keeps shifting. Is there a bootstrap class that I may have missed?
header potential fix **new
Navbar.jsx
<nav className='navbar navbar-expand-lg navbar-light custom-nav'>
<button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
<span className='navbar-toggler-icon'></span>
</button>
<NavLink className='navbar-brand' to={props.url[0]}>{props.title}</NavLink>
<div className='collapse navbar-collapse' id='navbarNav'>
<ul className='navbar-nav'>
<li className='nav-item'>
<NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[1]}>{props.link[1]}</NavLink>
</li>
<li className='nav-item'>
<NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[2]}>{props.link[2]}</NavLink>
</li>
<li className='nav-item'>
<NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[3]}>{props.link[3]}</NavLink>
</li>
</ul>
</div>
<div>
<input type='checkbox' class='checkbox' id='checkbox' onChange={toggleDarkMode} />
<label for='checkbox' class='checkbox-label'>
<i class='fas fa-sun'></i>
<i class='fas fa-moon'></i>
<span class='ball'></span>
</label>
</div>
</nav>