Magento 2 : Missing Account Links in mobile view

Question

I am not getting how the contents of my account links are not displaying when viewed as mobile format. You can see in the image there is no links under account tab.

Here is my overridden default.xml:

<?xml version="1.0"?>
<page layout="3columns"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="header.container">

        <container name="header.panel.wrapper.mobile" htmlClass="panel wrapper" htmlTag="div" before="header.panel.wrapper">

            <container name="header.panel.wrapper.mobile.container" htmlClass="container" htmlTag="div">

                <block class="Magento\Cms\Block\Block" name="headline-item">
                    <arguments>
                        <argument name="block_id" xsi:type="string">header-headline</argument>
                    </arguments>
                </block>
                <block class="Magento\Framework\View\Element\Html\Links" name="header.links.desktop" after="headline-item">
                    <arguments>
                        <argument name="css_class" xsi:type="string">header links desktop</argument>
                    </arguments>
                    <block class="Magento\Customer\Block\Account\Customer" name="customer.desktop" template="Magento_Customer::account/customer.phtml" before="-">
                        <block class="Magento\Customer\Block\Account\Navigation" name="top.links.desktop">
                            <block class="Magento\Customer\Block\Account\Link" name="my-account-link.desktop">
                                <arguments>
                                    <argument name="label" xsi:type="string" translate="true">My Account</argument>
                                    <argument name="sortOrder" xsi:type="number">110</argument>
                                </arguments>
                            </block>
                            <block class="Magento\Wishlist\Block\Link" name="wish-list-link.desktop" after="my-account-link">
                                <arguments>
                                    <argument name="sortOrder" xsi:type="number">60</argument>
                                </arguments>
                            </block>
                        </block>
                    </block>
                    <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login.desktop" template="Magento_Customer::account/link/authorization.phtml">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">10</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link.desktop" template="Magento_Customer::account/link/register.phtml">>
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">Sign Up</argument>
                        </arguments>
                    </block>
                </block>
            </container>

        </container>

        <container name="header.panel.wrapper.menu" htmlClass="wrapper-header-menu" htmlTag="div" after="-">
            <container name="header.panel.wrapper.menu.container" htmlClass="container" htmlTag="div">
                <block class="Magento\Framework\View\Element\Template" name="header.mobile" template="Magento_Theme::header/links/menu.phtml" />
            </container>
        </container>


    </referenceContainer>


    <referenceBlock remove="true" name="skip_to_content" />

    <move element="top.search" destination="header.panel.wrapper.menu.container" after="-" />


    <referenceBlock name="store.menu">
        <arguments>
            <argument name="block_id" xsi:type="string">store-menu</argument>
        </arguments>
        <block class="Magento\Cms\Block\Block" name="side__navigation">
            <arguments>
                <argument name="block_id" xsi:type="string">side__navigation</argument>
            </arguments>
        </block>
    </referenceBlock>

    <referenceBlock name="store.links">
        <arguments>
            <argument name="block_id" xsi:type="string">store-links</argument>
        </arguments>
    </referenceBlock>

    <referenceBlock name="store.settings">
        <arguments>
            <argument name="block_id" xsi:type="string">store-settings</argument>
        </arguments>
    </referenceBlock>



    <referenceContainer name="page.wrapper">
        <container name="page.before.footer">
            <block class="Magento\Cms\Block\Block" name="footer-exclude-tax" after="page.content">
                <arguments>
                    <argument name="block_id" xsi:type="string">footer-exclude-tax</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>



    <referenceBlock name="footer_links" remove="true"/>
    <referenceContainer name="footer">

        <block class="Magento\Cms\Block\Block" name="footer-shopping_guide">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-shopping-guide</argument>
            </arguments>
        </block>
        <block class="Magento\Cms\Block\Block" name="footer-shoplist">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-shoplist</argument>
            </arguments>
        </block>
        <block class="Magento\Cms\Block\Block" name="footer-sns">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-sns-icons</argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceBlock name="form.subscribe" remove="true"/>

</body>

I also followed this link as well: Magento 2 : Missing Account Links in Mobile Menu

but not working in my case. Does anyone has faced same type of errors and later solved? Please help if you had solved this one. Thanks in advance.

No, header.links.desktop has not been removed, I had not added the line to remove header.links.desktop. It is strange how the account links are not displaying... — Suman Maharjan, Commented Aug 30, 2019 at 9:13
Have you tried Luma's default.xml file in place of your default.xml file to check if the issue is with this file or any other module confliction? — Sumit, Commented Aug 30, 2019 at 9:17
Yeah, already tried that one as well. But if I changed to default theme as Luma not my custom theme as that case it is showing the account menu, might that be the problem with js or any conflict with css.. — Suman Maharjan, Commented Aug 30, 2019 at 9:25
Had similar issue was all down the to a issue with the less compilation it had hidden all links was very frustrating to find — Dava Gordon, Commented Aug 30, 2019 at 9:43

St3phan · Accepted Answer · 2021-07-06 09:16:14Z

1

Paste this code in theme.js file and put that file inside Magento_Theme/web/js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery'
], function ($) {
    'use strict';
    $('.header.links').clone().appendTo('#store\\.links');
});

edited Jul 6, 2021 at 9:16

St3phan

2,9271 gold badge25 silver badges49 bronze badges

answered Feb 25, 2021 at 2:34

suraj

111 bronze badge

Add a comment |

St3phan · Accepted Answer · 2021-07-06 09:14:45Z

The problem is that you moved .header.links from .panel.header container to another container, and the javascript that clones the links does not find the element to be cloned, and the javascript that clones the links looks like this:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'mage/smart-keyboard-handler',
    'mage/mage',
    'mage/ie-class-fixer',
    'domReady!'
], function ($, keyboardHandler) {
    'use strict';

    if ($('body').hasClass('checkout-cart-index')) {
        if ($('#co-shipping-method-form .fieldset.rates').length > 0 &&
            $('#co-shipping-method-form .fieldset.rates :checked').length === 0
        ) {
            $('#block-shipping').on('collapsiblecreate', function () {
                $('#block-shipping').collapsible('forceActivate');
            });
        }
    }

    $('.cart-summary').mage('sticky', {
        container: '#maincontent'
    });

    $('.panel.header > .header.links').clone().appendTo('#store\\.links');

    keyboardHandler.apply();
});

You need to copy the theme.js file from vendor/magento/theme-frontend-blank/Magento_Theme/frontend/web/js/theme.js to your current theme app/design/VendorTheme/vendor-theme/Magento_Theme/web/js/theme.js and modify this line:

$('.panel.header > .header.links').clone().appendTo('#store\\.links');

in that:

$('.header.links').clone().appendTo('#store\\.links');

The javascript code from theme.js is from Magento 2.3.7, but for other versions of Magento2 it is the same file, only the content of the file differs slightly.

Suman Maharjan · Accepted Answer · 2024-02-08 06:59:15Z

I have solved this issue by changing my default.xml template like this:

<?xml version="1.0"?>
<page layout="3columns"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="header.container">
        <container name="header.panel.wrapper.mobile" htmlClass="panel wrapper" htmlTag="div" before="header.panel.wrapper">
            <container name="header.panel.wrapper.mobile.container" htmlClass="container" htmlTag="div">
                <block class="Magento\Cms\Block\Block" name="global-guide-popup">
                    <arguments>
                        <argument name="block_id" xsi:type="string">global-guide-popup</argument>
                    </arguments>
                </block>
                <block class="Magento\Cms\Block\Block" name="headline-item">
                    <arguments>
                        <argument name="block_id" xsi:type="string">header-headline</argument>
                    </arguments>
                </block>
            </container>
        </container>
        <container name="header.panel.wrapper.menu" htmlClass="wrapper-header-menu" htmlTag="div" after="-">
            <container name="header.panel.wrapper.menu.container" htmlClass="container" htmlTag="div">
                <block class="Magento\Framework\View\Element\Template" name="header.mobile" template="Magento_Theme::header/links/menu.phtml" />
            </container>
        </container>
    </referenceContainer>

    <referenceBlock remove="true" name="skip_to_content" />
    <move element="currency" destination="header.panel.wrapper.mobile.container" after="header.links" />
    <move element="top.search" destination="header.panel.wrapper.menu.container" after="-" />
    <referenceBlock remove="true" name="header.links" />

    <referenceBlock name="store.menu">
        <arguments>
            <argument name="block_id" xsi:type="string">store-menu</argument>
        </arguments>
        <block class="Magento\Cms\Block\Block" name="side__brand__navigation">
            <arguments>
                <argument name="block_id" xsi:type="string">brand__navigations</argument>
                <argument name="class" xsi:type="string">nav brands links</argument>
            </arguments>
        </block>
        <block class="Magento\Cms\Block\Block" name="side__navigation">
            <arguments>
                <argument name="block_id" xsi:type="string">side__navigation</argument>
            </arguments>
        </block>
    </referenceBlock>
    <referenceBlock name="store.links">
        <arguments>
            <argument name="block_id" xsi:type="string">store-links</argument>
        </arguments>
    </referenceBlock>

    <referenceBlock name="store.settings">
        <arguments>
            <argument name="block_id" xsi:type="string">store-settings</argument>
        </arguments>
    </referenceBlock>
    <referenceContainer name="page.wrapper">
        <container name="page.before.footer">
            <block class="Magento\Cms\Block\Block" name="footer-exclude-tax" after="page.content">
                <arguments>
                    <argument name="block_id" xsi:type="string">footer-exclude-tax</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>

    <referenceBlock name="footer_links" remove="true"/>
    <referenceContainer name="footer">
        <block class="Magento\Cms\Block\Block" name="footer-shopping_guide">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-shopping-guide</argument>
            </arguments>
        </block>
        <block class="Magento\Cms\Block\Block" name="footer-shoplist">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-shoplist</argument>
            </arguments>
        </block>
        <block class="Magento\Cms\Block\Block" name="footer-sns">
            <arguments>
                <argument name="block_id" xsi:type="string">footer-sns-icons</argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceBlock name="form.subscribe" remove="true"/>
    <referenceContainer name="header-wrapper">
        <block class="Magento\Framework\View\Element\Html\Links" name="header.links.desktop" before="minicart">
            <arguments>
                <argument name="css_class" xsi:type="string">header links desktop</argument>
            </arguments>
            <block class="Magento\Cms\Block\Block" name="global-flag" after="register-link.desktop">
                <arguments>
                    <argument name="block_id" xsi:type="string">global-flag</argument>
                </arguments>
            </block>

            <block class="Magento\Customer\Block\Account\Customer" name="customer.desktop" template="Magento_Customer::account/customer.phtml" after="back-to-home">
                <block class="Magento\Customer\Block\Account\Navigation" name="top.links.desktop">
                    <block class="Magento\Customer\Block\Account\Link" name="my-account-link.desktop">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">My Account</argument>
                            <argument name="sortOrder" xsi:type="number">110</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Wishlist\Block\Link" name="wish-list-link.desktop" after="my-account-link">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">60</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navagation-logout-link">
                        <arguments>
                            <argument name="path" xsi:type="string">customer/account/logout</argument>
                            <argument name="label" xsi:type="string">ログアウト</argument>
                        </arguments>
                    </block>
                </block>
            </block>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login.desktop" template="Magento_Customer::account/link/authorization.phtml">
                <arguments>
                    <argument name="sortOrder" xsi:type="number">10</argument>
                </arguments>
            </block>
        </block>
    </referenceContainer>
</body>

No need to edit js files. But it took lot of trouble to find out this solution.

Stack Exchange Network

Magento 2 : Missing Account Links in mobile view

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2.3
menu
navigation
mobile-menu
or ask your own question.

Linked

Hot Network Questions

Magento 2 : Missing Account Links in mobile view

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2.3menunavigationmobile-menu or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2.3
menu
navigation
mobile-menu
or ask your own question.