navbar fixed button on collapse show

Question

I'm trying to keep the position of the dark mode toggler on show of collapse. I'm using bootstrap but am fine with custom css. I've tried moving the toggler outside of the collapse and above the title but it's still moving. Is there a bootstrap class I'm overlooking?

header collapsed

header not collapsed

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>

Answer 1

Perhaps if you use "position:absolute" for the toggler, it'll stay in place when the header is expanded and all the elements around the toggler are shifted.