Как поставить collapse toggle bootstrap в float-right и поверх всего?

Я пытаюсь создать вертикальное меню справа и поверх всего содержимого тела, однако, как только я вхожу в позицию, меню переходит в левую сторону.

Что мне делать, чтобы держать его сверху всего тела и с правой стороны? Помните, что к нему будет добавлен горизонтальный перелив.

<!-- NAVBAR -->
<header role = "main" id = "header" class = "fixed-top">     
    <nav class = "navbar navbar-expand justify-content-between">
        <form class = "form-inline form-row bg-white rounded shadow">
            <div class = "col-12 col-sm-auto p-0">
                <div class = "input-group ml-sm-2">
                    <div class = "input-group-prepend">
                        <label class = "input-group-text bg-transparent border-0" for = "select-indicador"><i class = "al-icon-line-chart al-text-dark-grey"></i></label>
                    </div>
                    <select id = "select-indicador" class = "custom-select form-control border-0 rounded-0 shadow-none">
                        <option selected>Indicador</option>
                        <option value = "1">Venda Absoluta</option>
                    </select>
                </div>
            </div>
            <div class = "col-12 col-sm-auto p-0">
                <div class = "input-group">
                    <div class = "input-group-prepend">
                        <span id = "periodo-icon" class = "input-group-text bg-transparent ml-2 ml-sm-0 border-0"><i class = "far fa-calendar-alt al-text-dark-grey"></i></span>
                    </div>
                    <input type = "text" id = "periodo-picker" class = "form-control border-0 shadow-none" placeholder = "Período" aria-label = "Período" aria-describedby = "periodo-icon">
                </div>
            </div>
            <div class = "col-12 col-sm-auto p-0">
                <button type = "button"  id = "btn-search" class = "btn btn-lg d-block w-100 al-bg-green shadow-none"><i class = "fab fa-searchengin fa-lg text-white"></i></button>
            </div>
        </form>
        <button type = "button" class = "btn navbar-toggle al-bg-dark-grey py-5 py-sm-2 ml-3 ml-sm-0 shadow" data-toggle = "collapse" data-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle Navigation"><i class = "al-icon-navmenu al-text-green"></i></button>
    </nav>
</header>

<!-- NAVBAR TOGGLE EXTERNAL CONTENT -->
<section role = "external-content-section" id = "navbarToggleExternalContent" class = "collapse external-toogle-content-section float-right rounded al-bg-dark-grey">
    <div class = "container">
        <div class = "row">
            <div class = "col-12"><button type = "button" class = "btn float-right pt-4 pt-sm-0 py-3 px-3 mt-4  mt-sm-3 border-0 bg-transparent shadow-none" data-toggle = "collapse" data-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle Navigation"><i class = "fas fa-times fa-3x al-text-green"></i></button></div>
            <div class = "col-12" style = "background-color: red"><a href = "" class = "float-left al-text-green"><h5>HOME</h5></a></div>
            <div class = "col-12">
                <details class = "float-left mt-3 mb-3">
                    <summary>Rio de Janeiro</summary>
                    <p><a href = "#" class = "summary-link"><h6>Boulevard Shopping Campos</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Carioca Shopping</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Carioca Shopping</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Caxias Shopping</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Shopping Grande Rio</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Shopping Leblon</h6></a></p>
                    <p><a href = "#" class = "summary-link"><h6>Via Parque Shopping</h6></a></p>
                </details>
            </div>
        </div>
    </div>