I want to move the category title to this image:
Is it possible to do it with the layout.xml or is CSS needed to move it there?
Place the following code in your theme's catalog_category_view.xml file right before the closing body tag <move element="page.main.title" destination="columns.top" before="-"/>.
You may also be able to place it in the admin category page layout xml updates area, though offhand I'm unsure if M2 allows the <move> tag in that location.
-
The solution you offered doesnt work, it overlays the image over the filters. – Wouter Stulp Feb 28 '19 at 11:32
-
1Can you add a copy of your
catalog_category_view.xmland a screenshot of the overlap? What version of Magento2 are you using? You could also try<move element="page.main.title" destination="columns.top" before="category.view.container"/>. I tried this on m2 instance I have spun up and it moved the title above the image. Though, I also have the filter located in a different area than your original screenshot. – mlunt Feb 28 '19 at 15:52 -
Thanks for your response, i have fixed it with CSS, see my sollution – Wouter Stulp Mar 1 '19 at 10:02
I have added css to the image and the title:
@media all and (min-width: 768px), print {
.category-view{
width: 79.16666667%;
float: right;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.page-title-wrapper{
width: 79.16666667%;
float: right;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.page-title-wrapper.product{
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
.category-view{
width: 75%;
}
.page-title-wrapper{
width: 75%;
}
}
Now it gives the following result:
