0

XML:

<referenceBlock name="customer_account_navigation">
 <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="css_class" xsi:type="string">my-custom-css-class-here-not-working</argument>
    </arguments>
 </block>
 <!-- @Prashant Valanda suggestion -->
 <referenceBlock name="customer-account-navigation-account-link">
  <arguments>
   <argument name="label" xsi:type="string" translate="true">Account Dashboard works</argument>
   <argument name="path" xsi:type="string">customer/account</argument>
   <argument name="sortOrder" xsi:type="number">250</argument>
   <argument name="css_class" xsi:type="string">but-my-custom-css-class-here-still-does-not-work</argument> 
  </arguments>
 </referenceBlock>
</referenceBlock>

Taken from /../vendor/magento/module-customer/view/frontend/layout/customer_account.xml

Any ideas how one can add css class?

  • Have you found a solution to this? I have the same problem that I can not add my own css class to link in customer account navigation. – Magento Learner Mar 6 at 16:27
2

You cannot add a custom class unless you rewrite Magento's class:

Magento\Framework\View\Element\Html\Link\Current

But you can add arbitrary HTML attributes.

For example, here I am removing links only in mobile view by adding attribute mobile="hidden"

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="attributes" xsi:type="array">
          <item name="mobile" xsi:type="string">hidden</item>
       </argument>
    </arguments>
</referenceBlock>

And then in my CSS (actually somewhere in my less files) I put this:

@media (max-width: 767px) {
   *[mobile="hidden"] {
      display: none !important;
   }
}
0

Use below code:

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="css_class" xsi:type="string">my-custom-css-class-here-not-working</argument>
    </arguments>
</referenceBlock>
  • 1
    It doesn't work! Note: it does overwrite the block I've tested it but it does NOT Add the css class – Juliano Vargas Aug 30 '18 at 16:31
  • @JulianoVargas where you have placed this file? – Prashant Valanda Aug 30 '18 at 18:12
  • I've updated the question to see where I placed the xml and the file is under my theme! – Juliano Vargas Aug 31 '18 at 8:03

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.