Please add option for submenu offset top

[ve3]

An example from this demo page ( http://vadikom.github.io/smartmenus/src/demo/ ) The sub menu from Sub test > more.... This sub menu is very long. My page has a stick top navbar and sidebar. This submenu is on sidebar of my page and cannot set z-index higher than the navbar, then it stuck at under the navbar.

Please add an option that this submenu can set offset from top of the page.

[vadikom]

Could you please post a live demo URL of your code? I suppose there should be a reasonably simple CSS fix for the issue you describe.

[ve3]

Here is an example. https://rundiz.github.io/rundiz-template-for-admin/ It is my admin template I made it for free.

On sidebar menu, go to Sub menus > 3 Open the 3 sub menu and you will see very long sub menu that is disappear under the navbar. It would be good if there is an offset top option. :)

[vadikom]

Is there any problem if you change the following:

@mixin rd-sidebar-inner {
    // this will becomes .rd-page-wrapper .rd-sidebar-inner inside @media (min-width: $minimum-sidebar-breakpoint)
    .rd-sidebar-inner {

        // ...

        z-index: ($z-index-sidebar + 1);// fix sticky menu cause the menu is under everything that contain `position: relative;`.
    }
}

to something like this:

@mixin rd-sidebar-inner {
    // this will becomes .rd-page-wrapper .rd-sidebar-inner inside @media (min-width: $minimum-sidebar-breakpoint)
    .rd-sidebar-inner {

        // ...

        z-index: ($z-index-navbar + 1);// fix sticky menu cause the menu is under everything that contain `position: relative;`. Also make sure the sub menus appear above the sticky header navbar.
    }
}

in: https://raw.githubusercontent.com/Rundiz/rundiz-template-for-admin/master/assets/scss/rdta/layout/_mixins.scss

?

Apart from that I agree, top/bottom/right/left offset settings for the viewport edge detection feature might be useful in some cases.

[ve3]

Sidebar cannot have z-index higher than navbar (top) because on the page that has long sidebar menu, when scrolling down the sidebar menu items will be appears over the navbar.

Example page that have long sidebar menu. https://rundiz.github.io/rundiz-template-for-admin/stickymenu-long-menu.html

[vadikom]

Hmm, yep, I get it. In your case, it's really a problem. I will consider implementing the options in the future. In the meantime, you would need to use some kind of JS solution if you would like to keep this exact layout. Here is a quick example solution:

(function($) {

  // ondomready
  $(function() {

    // SmartMenus jQuery - slide out the header navbar if a sidebar sub menu overlaps it
    var $navbar = $('.rd-navbar'),
      $sidebarMenu = $('.rd-sidebar-item-list');

    $sidebarMenu.on({
      'show.smapi': function(e, menu) {
        var obj = $(this).data('smartmenus');
        if (!obj.isCollapsible()) {
          if ($(menu).offset().top - $(window).scrollTop() < $navbar.outerHeight()) {
            $navbar.stop(true).animate({ top: -100 }, 250);
          }
        }
      },
      'hideAll.smapi': function(e, menu) {
        var obj = $(this).data('smartmenus');
        if (!obj.isCollapsible()) {
          $navbar.stop(true).animate({ top: 0 }, 250);
        }
      }
    });

  });

})(jQuery);

This will slide out the header navbar in case a sidebar submenu is about to overlap. This is just a proof of concept and uses the jQuery animate method but you could also swap some class name for example and use CSS transitions/animations instead if you like.

Hope this helps!

[ve3]

Tested and working.

Thank you very much.