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

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;
}

.submenu-reverse{
   // 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:

Hope this will be helpful. Thanks 🙂

Previous Blog: Add Custom Column in Customer Grid

Next Blog: Create Dependent Attribute Fields on Customer Registration Form