Read More
Read More
Menu Close

    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:

    beforeChanges2
    beforeChanges

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

    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"}}}'>
    changesInTopmenuPhtmlFile

    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 ?
    Read More
    afterChanges
    afterChanges2

    Hope this will be helpful. Thanks 🙂

    Previous Blog: Add Custom Column in Customer Grid

    Next Blog: Create Dependent Attribute Fields on Customer Registration Form

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top