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:
/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.js
/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.bootstrap.js
/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.keyboard.js
/typo3conf/ext/demotemplate/Resources/Public/CSS/smartmenus/jquery.smartmenus.bootstrap.css
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="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" class="dropdown-item dropdown-toggle-submenu">Neuigkeiten</a>
should become:
<a href="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" 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.
