jqueryhtmlcsslaravel

SB Admin 2 Sidebar menu expands on load


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>

Solution

  • 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">