0

by default nav-menu drop-down is so slow so I want the increase the drop-down time of nav-menu..

Till now I tried editing the two files but no success.. files edited: js/navigation-menu.js, Magento_Theme/menu.js

Hope some one help me to achieve this.

2 Answers 2

4

In your theme, make this file:

Your/theme/Magento_Theme/templates/html/topmenu.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

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

The key ingredient is the delay option in the menu initialization. The default value is 300 milliseconds so here I set it to 150.

1
  • I tried changing delay to 150 but it seems the changes is not applied. It still loads the menu slowly. How do I verify that the delay time is actually being applied? May 4, 2018 at 18:40
0

Its not in your JS files, you have to check the Less files since its a CSS thing. For examples check _navigation.less on line 155 you will find

transition: left .3s ease-out;

but you can also make your own less that overwrites these values in your custom css part. Then add this and change the values in your own less files

@media only screen and (max-width: 767px)
    .nav-sections {
        -webkit-transition: left .3s;
        -moz-transition: left .3s;
        -ms-transition: left .3s;
        transition: left .3s;
    }   
    .nav-before-open .page-wrapper {
        -webkit-transition: left .3s;
        -moz-transition: left .3s;
        -ms-transition: left .3s;
        transition: left .3s;
    }
}
2
  • thanks for answer but no luck with this Jan 30, 2017 at 13:18
  • Worked for me. please share your url or something so i can take a look for you\ Jan 30, 2017 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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