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
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;
}
}