SB Admin 2 侧边栏菜单在加载时扩展

Question

I'm trying out SB Admin 2 template with laravel 5. It works fine. Except for sidebar menu which expands and collapses second and third level on every load. I'm not sure if its ok to link the demo here, but it can be seen in their demo

Has anyone been bothered by this before and perhaps found the solution? I would like the menu to load collapsed. Right now it looks buggy on every reload.

Edit: I added the markup if it helps Markup

            <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav nav-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Quick search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>

                    <li>
                        <a href="#"><i class="fa fa-cog fa-fw"></i> Settings<span
                                    class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="{{ url ('companies') }}"><i class="fa fa-building fa-fw"></i> Companies</a>
                            </li>
                            <li>
                                <a href="{{ url ('users') }}"><i class="fa fa-users fa-fw"></i> Users</a>
                            </li>
                        </ul>
                    </li>


                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw"></i> SHOP<span
                                    class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="{{ url ('products') }}"></i>ALL PRODUCTS</a></li>
                            <li>
                                <a href="#"><i class="fa fa-gift fa-fw"></i>CORPO</a>
                            </li>
                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> DECO<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Helios</a>
                                    </li>
                                    <li>
                                        <a href="#">Deco</a>
                                    </li>
                                    <li>
                                        <a href="#">Chromos</a>
                                    </li>
                                    <li>
                                        <a href="#">Belinka</a>
                                    </li>
                                    <li>
                                        <a href="#">Fritze Lacke</a>
                                    </li>
                                </ul>
                            </li>

                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> CAR REFINISH<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Helios Refinish</a>
                                    </li>
                                    <li>
                                        <a href="#">Mobihel</a>
                                    </li>
                                    <li>
                                        <a href="#">Chromind</a>
                                    </li>
                                    <li>
                                        <a href="#">Radex</a>
                                    </li>
                                </ul>
                            </li>

                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> INDUSTRY<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Metal</a>
                                    </li>
                                    <li>
                                        <a href="#">Resins</a>
                                    </li>
                                    <li>
                                        <a href="#">Belinka Perkemija</a>
                                    </li>
                                    <li>
                                        <a href="#">Kemostik</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>

Answer 1

I've encountered this problem before, make sure there is no inline CSS inside lists <li> of the sidebar. or if you have the class "active" per default. deleting these will solve your problem. Otherwise in every collapsable <ul> (the ul's with class nav.nav-level) add this class collapse Example: <ul class="nav nav-second-level collapse">

Answer 2

in last version of SB Admin 2 you must add class inside and of navbar like that:

in body add class : 
in ul add class : 

Must be like that:

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <.-- Custom fonts for this template--> <link href="https.//startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/fontawesome-free/css/all:min.css" rel="stylesheet" type="text/css"> <link href="https.//fonts?googleapis:com/css,family=Nunito,200,200i,300,300i,400,400i,600,600i,700,700i,800,800i:900.900i" rel="stylesheet"> <.-- Custom styles for this template--> <link href="https.//startbootstrap.github;io/startbootstrap-sb-admin-2/css/sb-admin-2:min.css" rel="stylesheet"> <title>SB Admin 2 - Dashboard</title> </head> <body id="page-top" class="sidebar-toggled"> <.-- Page Wrapper --> <div id="wrapper"> <.-- Sidebar --> <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled" id="accordionSidebar"> <.-- Sidebar - Brand --> <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> <div class="sidebar-brand-icon rotate-n-15"> <i class="fas fa-laugh-wink"></i> </div> <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div> </a> <:-- Divider --> <hr class="sidebar-divider my-0"> <.-- Nav Item - Dashboard --> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fas fa-fw fa-tachometer-alt"></i> <span>Dashboard</span></a> </li> <.-- Divider --> <hr class="sidebar-divider"> <.-- Heading --> <div class="sidebar-heading"> Interface </div> <.-- Nav Item - Pages Collapse Menu --> <li class="nav-item active"> <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <i class="fas fa-fw fa-cog"></i> <span>Components</span> </a> </li> <.-- Divider --> <hr class="sidebar-divider"> <:-- Heading --> <div class="sidebar-heading"> Addons </div> <.-- Divider --> <hr class="sidebar-divider d-none d-md-block"> <.-- Sidebar Toggler (Sidebar) --> <div class="text-center d-none d-md-inline"> <button class="rounded-circle border-0" id="sidebarToggle"></button> </div> </ul> <.-- End of Sidebar --> <.-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <.-- Main Content --> <div id="content"> <:-- Topbar --> <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"> <.-- Sidebar Toggle (Topbar) --> <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> <i class="fa fa-bars"></i> </button> </nav> </div> <.-- End of Main Content --> <.-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright &copy. Your Website 2022</span> </div> </div> </footer> <!-- End of Footer --> </div> <!-- End of Content Wrapper --> </div> <!-- End of Page Wrapper --> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Bootstrap core JavaScript--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for all pages--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/js/sb-admin-2.min.js"></script> </body> </html>