2

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.

1 Answer 1

1

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;
    }
}
2
  • Is this working? Commented Mar 11, 2020 at 16:32
  • @KowsiganAtsayam Yes this is working Commented Mar 16, 2020 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.