Recently someone helped me changing the menu icons to text with the following code placed in base.css:
.header__icon--search::after {
content: 'Search';
position: absolute;
top: 50%;
}
.header__icon--account::after {
content: 'Account';
position: absolute;
}
.header__icon--cart::after {
content: 'cart';
position: absolute;
}
.header__icon--search span, .header__icon--account svg, .header__icon--cart svg{
display: none;
}
but now the text is overlapping each other. How can I fix this?
Hello, This is happening to you because CSS properties like position absolute have this behavior.
What you need to do is the following:
1. First, the code you added in base.css for good practices is better moved to the custom css section.
In the section I highlighted below
2. Edit when you have already placed this code in custom CSS, add the following property to the code as I leave it to you below.
.header__icon--search::after {
content: 'Search';
position: absolute;
top: 50%;
right: 0px; /* 1px, 2px,+++ ve moviendo los valores hasta encontrar el correcto */
}
.header__icon--account::after {
content: 'Account';
position: absolute;
right: 0px; /* 1px, 2px,+++ ve moviendo los valores hasta encontrar el correcto */
}
.header__icon--cart::after {
content: 'cart';
position: absolute;
right: 0px; /* 1px, 2px,+++ ve moviendo los valores hasta encontrar el correcto */
}
.header__icon--search span, .header__icon--account svg, .header__icon--cart svg{
display: none;
}
Yes this does not work, feel free to send me a message or write to me privately to help you solve this problem.
