Unwanted transform translate3d effect in menu

Question

My (J3.9.16) website has a horizontally aligned mainmenu for larger screens.

It works fine on my iPad. If I tap on a parent item the child dropdown menu is displayed and if I tap the parent again, the child dropmenu closes.

The same happens on a desktop with a mouse: hovering over the parent opens the child dropdown menu and then moving closes the child dropdown menu (moving the cursor down onto the dropdown menu leaves it open, of course, to enable child item selection).

BUT... clicking on the parent item (which visitors might do if they're not sure whether there's any content on that link) when the child menu is open results in the child menu moving slightly up and to the right but not closing:

The html in Firefox (but also similar in Chrome) code changes from this:

<ul class="nav-child dropdown-menu>

To this:

<ul class="nav-child dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform:translate3d(8px, 30px, 8px, 0px); top: 0px; left 0px; will-change: transform;">

I can't override it with css as inline takes priority.

How can I:

a) stop the browsers adding this code, and b) WITHOUT jQuery, but vanilla Javascript is ok if absolutely necessary, make clicking with a mouse on a parent item close the child dropdown menu?

Thank you.

Answer 1

I did manage to solve it in the end, although I still have no idea why the inline code - which was added by Firefox, not me - was added.

I compared the html/css class code for the menu with another menu that wasn't doing the same thing. This code was faulty:

    <nav id="topmenu">
    <?php if ($this->countModules('mainmenu')) : ?> 
    <div id="mainmenu" class="mr-auto ml-auto d-none d-lg-block">
    <jdoc:include type="modules" name="mainmenu" style="none"/>
    </div>
    <?php endif; ?>
    </nav>

but this is ok:

    <div id="topmenu">
        <div id="mainmenuwrapper" class="mr-auto ml-auto d-none d-lg-block">
            <div class="navbar navbar-expand-lg">
            <div id="mainmenu" class="navbar">    
            <jdoc:include type="modules" name="mainmenu" style="none" />
            </div>
        </div>
    </div>

The menus were built using a Joomla template override, but I didn't have to make any changes to this, just the code above.

Answer 2

I'm not sure if i got it right but you can try changing the core files of the menu and try to remove the inline css code (if that is causing the problem). You can yet add media queries to your css file to verify the screen size and apply different translate 3D effects (or any other style) to your menu.

The core files of your menu usually lie in modules\mod_menu\tmpl alternatively (and the most recommended), you can override your menu default.php file by adding this to your template folder: templates/your-template/html/mod_menu/default.php copy the default.php file from modules\mod_menu\tmpl to templates/your-template/html/mod_menu/