In Magento 2.2.5, Is there any way to display the top customer header links in Category navigation menu.

Like this

enter image description here

  • Customer header links are available 2 times in page, 1 is on top left side of page & second one is available in category navigation menu. 1st is used in desktop version & another is used in mobile/tab version. So make 2nd one visible using css in both desktop&mobile version& hide 1st one. – Nauman m. Mansuri Jan 23 '19 at 10:55

Add below code in Magento_Theme/layout/default.xml file

    <referenceContainer name="page.top">
                <container name="header.bottom" htmlTag="div" htmlClass="header-bottom" after="-">

 <move element="top.links" destination="header.bottom"/>
 <move element="navigation.sections" destination="header.bottom" after="top.links"/>

and run below command

php bin/magento cache:clean & php bin/magento cache:flush
| improve this answer | |
  • @Mohammed, Thanks for your suggestion. It is showing as one by one links. I need as it is with dropdown. Any possibilities. – Saravanan DS Jan 24 '19 at 13:08
  • Use below code to show links with dropdown, <container name="header.links" htmlTag="div" htmlClass="header-links" after="-"> <block class="Magento\Customer\Block\Account\Navigation" name="top.links"> <arguments> <argument name="css_class" xsi:type="string">header links</argument> </arguments> </block> </container> <referenceContainer name="page.top"> <container name="header.bottom" htmlTag="div" htmlClass="header-bottom" after="-"> </container> </referenceContainer> – Mohammad Faizan Jan 25 '19 at 7:03
  • <move element="header.links" destination="header.bottom"/> <move element="navigation.sections" destination="header.bottom" after="top.links"/> – Mohammad Faizan Jan 25 '19 at 7:03
  • I am geting this output. PLease check here. ibb.co/Xj1YLyW I have a doubt. Why you moving these elements. "<move element="header.links" destination="header.bottom"/> <move element="navigation.sections" destination="header.bottom" after="top.links"/>". Because of this, breadcrumbs are coming before the navigation links. – Saravanan DS Jan 25 '19 at 7:46
  • We are moving these elements to change the postion of Header links as you needed instead of default, if you are having issue with breadcrumbs then use below code to make the proper postion of breadcrumbs. <move element="breadcrumbs" destination="main.content" before="-"/> – Mohammad Faizan Jan 25 '19 at 8:49

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.