Reply To: addon bootstrap vertical menu

[admin]

OK, I just got the time to test a bit more thoroughly your code.

The main problem is that the SmartMenus core CSS was not designed and intended to be used with the Bootstrap addon and it will break all kinds of things related to your regular Bootstrap navbar and most notably the collapsible mobile menu on small screens. So I would suggest you to not use a standard SmartMenus menu for your sidebar menu but instead add another regular Bootstrap horizontal navbar in your sidebar and then make it vertical with just a little additional CSS. Here are quick instructions:

1) Remove the links to “sm-core-css.css” and “sm-simple.css”.

2) Use the original version of “jquery.smartmenus.bootstrap.js”.

3) Replace your current sidebar menu UL:

        <!-- menu vertical START -->
        <ul id="sidebar-menu" class="sm sm-vertical sm-simple sm-simple-vertical">
                ...
        </ul>

with the following:

<nav id="navbar-sidebar" class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-sidebar-collapse" aria-expanded="false" aria-controls="navbar-sidebar-collapse">
        <span class="sr-only">Navigation ein-/ausblenden</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar-sidebar-collapse" class="navbar-collapse collapse">

      <!-- start sidebar nav -->
      <ul class="nav navbar-nav navbar-right sm-vertical">
                ...
      </ul>
      <!-- end sidebar nav -->

    </div><!-- end navbar-sidebar-collapse -->

  </div><!-- end container -->
</nav><!-- end navbar navbar-default -->

4) Use the following additional CSS to make the navbar vertical:

@media (min-width: 768px) {
	#navbar-sidebar .container-fluid,
	#navbar-sidebar .navbar-collapse {
		padding: 0;
	}
	#navbar-sidebar .navbar-right {
		margin-right: 0;
	}
	#navbar-sidebar .nav > li {
		width: 100%;
	}
}

Let me know if you have any troubles.