cancel
Showing results for 
Search instead for 
Did you mean: 

I need to change my account section tabs layout (vertical to horzontal).

Highlighted

I need to change my account section tabs layout (vertical to horzontal).

 

I need to change the My Account section side tabs layout (Vertical to Horizontal) and wanted to add on top before the My Videos Lab.

 

Add the tabs before videos label and vertical to horizontalAdd the tabs before videos label and vertical to horizontal

 

Please help me to resolve it.

1 REPLY 1
Highlighted

Re: I need to change my account section tabs layout (vertical to horzontal).

Hi @karuna_khatri 

 

You need change in 2 files for the result

1. chage the position on sidebar before the main column in layout configuration file

app/design/frontend/Ricky/Themefront/Magento_Customer/layout/customer_account_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <move element="div.sidebar.main" destination="columns" before="-" />
        
    </body>
</page>

2. LESS will do the rest, create _extend.less file to add the CSS for the horizontal nav in large screens( screens > 768 px)

app/design/frontend/Ricky/Themefront/Magento_Customer/web/css/source/_extend.less

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
   //  My account
   .account.page-layout-2columns-left {
    .sidebar-main,
    .sidebar-additional {
        width: 100%;
    }

    .column.main {
        width: 100%;
    }

    .block-collapsible-nav{
        .item{
            display: inline-block;
        }
    } 
}
}

1.png

Find helpful? Consider Giving Kudos to this post.
Problem solved? Click Accept as Solution!