Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Keyboard plugin fails when popper.js enabled

Home Forums Latest release 1.1.x Keyboard plugin fails when popper.js enabled

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #3729

    Hi, I really like the keyboard plugin, but the up and down arrows fails when enabling popper.js for the tooltips.

    Maybe someone of you knows a solution?



    Hi, it’s not because of “popper.js”, it’s because you are using an old version of the SmartMenus Bootstrap addon which is for Bootstrap 3 but at the same time you are using Bootstrap 4. So you would need to do a few things to cope properly with the issue:

    1) Download the latest SmartMenus release and upgrade all your files:


    with the latest versions (and make sure you are using “jquery.smartmenus.bootstrap-4.js” and “jquery.smartmenus.bootstrap-4.css” instead of “jquery.smartmenus.bootstrap.js” and “jquery.smartmenus.bootstrap.css”).

    2) You are also using some custom classes in your HTML menu structure so you would need to change them to avoid some issues (like the menu not being initialized at all, duplicate sub menu indicator arrows, etc.)

    a) Add the “navbar-nav” class to your root UL element:

    <ul class="nav flex-row navbar-nav smartmenus d-print-none" ...

    b) I saw you have modified the Bootstrap addon to add a few custom options. Now you don't need to do that, instead just set the "data-sm-options" attribute on the root UL element like this:

    <ul class="nav flex-row navbar-nav smartmenus d-print-none" data-sm-options="{ subMenusSubOffsetX: 0, subMenusSubOffsetY: -7, mainMenuSubOffsetX: -8, showTimeout: 100, subMenusMinWidth: '15em', subMenusMaxWidth: '', keepInViewport: false, keepHighlighted: false }"> ...

    c) Replace all instances of "dropdown-submenu" with "dropdown" - e.g.:

    <li class="dropdown-submenu">

    should become:

    <li class="dropdown">

    d) Replace all instances of "dropdown-toggle-submenu" with "dropdown-toggle" - e.g.:

    <a href="" class="dropdown-item dropdown-toggle-submenu">Neuigkeiten</a>

    should become:

    <a href="" class="dropdown-item dropdown-toggle">Neuigkeiten</a>

    The above should fix all major issues. From what I can see, you may just need additionally to tweak your main menu items' padding since adding the "navbar-nav" class seems to affect it.


    Wow – thank you very much!!!!

    It works! Great!!!🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘1.1.x’ is closed to new topics and replies.