Currently, I'm in the process of designing a template using Bootstrap 4 specifically for Joomla 4. The menu structure on different levels such as parent, child, and deeper, is defined within the mod_menu php files. I've implemented the same main site menu in two positions: one for mobile devices (#sidenav) and another for desktop view (#mainmenu).
For li items at the child level that serve as dividers/headers for the next menu level (e.g. item 'More information' but not 'Top Level item'), I have utilized the .dropdown-submenu class from the mod_menu/default_separator.php file.
The sidenav is displaying as intended, but for the mainmenu div (desktop/large tablet view), I aim to have the second and subsequent level dropdowns appear as 'dropright'.
After manually adding the class using the Firefox inspector and seeing it work perfectly, I am now looking to automatically add this class using Javascript to change:
<li class="dropdown-submenu">
to:
<li class="dropdown-submenu dropright">
Although my attempts with Javascript have been unsuccessful so far, here are some snippets I've tried:
function dropRight() {
var elements = document.getElementsByClassName('.dropdown-submenu');
elements.classList.add("dropright");
}
and
function dropRight() {
var ul = document.getElementById('mainmenu');
var li = ul.getElementsByTagName("li");
for (let i = 0; i < li.length; i++) {
if (li[i].classList.contains('dropdown-submenu')) {
li[i].classList.add("dropright");
}
}
}
I've done extensive research and attempted various code combinations without success. As Javascript isn't my strong suit, any assistance or guidance would be greatly appreciated.