Reading list Switch to dark mode

    Make Submenu position right adjacent of parent menu at frontend in Magento 2

    Updated 15 January 2022

    Hello Friends!
    In this blog, we are going to learn how we can place a submenu at the right adjacent position of its parent menu.

    In Magento 2, when we create a category menu with multiple levels then you can see the sub-sub menu position will be fixed as the following images:


    Here, we can change the position of the sub-sub menu by making changes in <magento-root-directory>/lib/web/css/source/lib/_navigation.less file at line number 462 and 468.

    .submenu {
        // top: 0 !important; //old statement
           top: 0; //new statement
           left: 100% !important;
       // left: auto !important; //old statement
          left: auto; //new statement
          right: 100%;

    Now, make changes in topmenu.phtml file inside <magento-root-directory>/vendor/module-theme/view/frontend/templates/html/ directory.
    Replace the following statement at line number 18

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

    with the new statement as following

    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top+10","at":"left bottom-45"}}}'>

    After making the above changes, run php bin/magento setup:upgrade command and flush the magento cache.
    Then check the menu on frontend and the result will be displayed as follows:

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Hope this will be helpful. Thanks ­čÖé

    Previous Blog: Add Custom Column in Customer Grid

    Next Blog: Create Dependent Attribute Fields on Customer Registration Form

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home