Text overlaping in menu

[RevelationMex]

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?

[joseamaya]

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.