Alguien sabe como centrar el menu seleccionado, tengo el siguiente caso: Cuando selecciono el menu, aparece en la parte de abajo como se ve en la imagen. pero tengo mas menus abajo, y al seleccionarlos me aparecen abajo y no se cual tengo seleccionado hasta bajar el menu.
Necesito que al seleccionar un menu, automaticamente me aparezca en el centro de la pantalla como el caso de ma siguiente imagen:
El codigo html es el siguiente:
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
</div>
<div class="offcanvas-body">
<nav class="bd-links w-100" th:if="${!#session.getAttribute('listMenuSesion').isEmpty()}" id="bd-docs-nav" aria-label="Docs navigation">
<ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
<li class="bd-links-group py-2" th:each="lista : ${#session.getAttribute('listMenuSesion')}" th:if="${lista.idMenu==0}">
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold" >
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true">
<use th:attr="'xlink:href'=${lista.icono}"></use></svg>
<span th:text="${lista.menu}" th:remove="tag"></span>
</strong>
<ul class="list-unstyled fw-normal pb-2 small" >
<li th:each="sublista : ${#session.getAttribute('listMenuSesion')}" th:if="${lista.id==sublista.idMenu}">
<a th:href="@{/}+${sublista.urlSubmenu}" class="bd-links-link d-inline-block rounded" th:classappend="${sublista.id}==${num} ? 'active' : ''" th:attr="aria-current=${sublista.id}==${num} ? 'page' : ''" th:text="${sublista.submenu}"></a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>