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.

Improve this question

1 Answer 1

Reset to default
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;
    }
}
Improve this answer
2

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.