Sidebar mobile problem

Bootstrap Studio Help
1

Hi everyone, I created a project with bootstrap studio, but I have a problem with the sidebar. When I look at it from the PC everything works correctly, if I look at it from the smartphone instead I cannot open the submenus. What am I doing wrong?

<nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
        <div class="container-fluid d-flex flex-column p-0">
            <a href="#">
                <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-house-damage"></i></div>
                <div class="sidebar-brand-text mx-3"><span>My Menù</span></div>
            </a>
            <hr class="sidebar-divider my-0">
                <ul class="nav navbar-nav text-light" id="accordionSidebar">    

                <li class="nav-item" role="presentation"><a href="index.php"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>    

                <li class="nav-item" role="presentation">                
                    <a href="#pageSubmenu_report"><i class="fas fa-cogs"></i><span>Report</span></a>                
                    <ul class="collapse list-unstyled" id="pageSubmenu_report">         
                        <li class="nav-item" role="presentation">
                            <a href="index.php?page=report"><i class="fas fa-euro-sign"></i><span>My Report 1</span></a>
                        </li>                 
                    </ul>    
                </li>               

                </ul>
            <div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button></div>
        </div>

</nav>

2

I can't diagnose your problem from this code snippet. Need to see the CSS. Is this from one of the BSS templates, an online component? Can you post a link to your published page?

3

Look this example http://80.211.31.248/test/

4

Your submenus are opening. They're just opening to the right of your collapsed sidebar, instead of below the parent link.

Adding the following to your custom CSS should fix the problem.

.sidebar .nav-item .collapse { position: relative; left: 0; }

5

Works fine. Thanks very much