2

I made some changes to a Top navigation (changing ul.submenu to div.submenu), all is fine, but I cannot find where in a Js is setup this inline style:

style="display: none; top: 53px; left: -0.453125px;"

It is part of this code:

<ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" style="display: none; top: 53px; left: -0.453125px;" aria-hidden="true">

I tried to find it in

magento/theme-frontend-blank/web/js/navigation-menu.js

but no luck.

I want to change this so that:

left: 0;
width: <calculate based on a platform used>;

Any help?

3

The menu is a jQuery UI element.

You can edit its settings by extending the following file in your theme: Magento_Theme/view/frontend/templates/html/topmenu.phtml it says:

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
    </ul>
</nav>

The menu settings are:

data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'

For instance, you can change the positions of the submenus by changing the values in data-mage-init according the documentation in jQuery UI, for example .position: https://api.jqueryui.com/position/

  • Would you please be kind and explain what (position":{"my":"left top","at":"left bottom"}}}) means and how it works? – Mohammed Joraid Mar 10 '18 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.