Magento – Move “Default welcome msg!” from right to left Magento 2

blocksfrontendmagento2

I'm trying to move the "Default welcome msg!" from the top bar on the right side, where is now, to the left side, so this way I have just the login, account ecc links on the right, and just the message on the left.
I'm using Luma theme, on Magento 2.

Best Answer

Create default.xml under your theme :

/app/design/frontend/Vendor/YourTheme/Magento_Theme/layout/default.xml

Add below code in 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" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="authorization-link-login" destination="header.links" after="-"/>
    </body>
</page>

Override below file in your theme :

/vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/module.less

In your theme:

/app/design/frontend/Vendor/YourTheme/Magento_Theme/web/css/source/module.less

Replace below lines:

Line No.: 93 to 119 

.header.panel {
    > .header.links {
        .lib-list-inline();
        font-size: 0;
        margin-left: auto;
        margin-right: @indent__base;
        width: 100%;

        > li {
            font-size: @font-size__base;
            margin: 0 0 0 15px;

            > a {
                .lib-link(
                @_link-color: @header-panel__text-color,
                @_link-text-decoration: none,
                @_link-color-visited: @header-panel__text-color,
                @_link-text-decoration-visited: none,
                @_link-color-hover: @header-panel__text-color,
                @_link-text-decoration-hover: underline,
                @_link-color-active: @header-panel__text-color,
                @_link-text-decoration-active: underline
                );
            }
        }
    }
}

Line No.: 551 to 598 

.header {
    &.panel {
        > .header.links {
            .lib-list-inline();
            margin-left: auto;

            > li {
                margin: 0;
                float: right;

                &.welcome,
                > a {
                    float: left;
                    display: inline-block;
                    line-height: 1.4;
                }

                &.welcome {
                    a {
                        .lib-css(color, @color-white);
                        .lib-css(padding-left, @indent__xs);
                    }
                }
            }

            > .authorization-link {
                float: right;
                &:after {
                    content: attr(data-label);
                    display: inline-block;
                    margin: 0 @indent__xs 0 @indent__xs;
                }
            }

            > .customer-welcome + .authorization-link {
                display: none;
            }
        }
    }

    &.content:extend(.abs-add-clearfix-desktop all) {
        padding: @indent__l @indent__base 0;
    }
}
Related Topic