Thanks in advance!
Is there a way I can change the Instagram icon to be a word instead of their logo? I am looking to only have words displayed in the drop down menu on the mobile version. Example shown below.
From this:
To this:
Topic summary
A user wanted to replace the Instagram icon with the text “Instagram” in their mobile menu dropdown on the Dawn theme.
Initial Solution:
- Custom CSS was provided to hide the Instagram SVG icon and display “Instagram” text instead
- The code targeted mobile devices (max-width: 768px) using media queries
Refinement:
- The first implementation showed white text with an underline
- Updated CSS was provided to change the text color to black (#000) and remove the underline using
text-decoration: none
Resolution:
The issue was successfully resolved with the refined CSS code added to the base.css file. The solution allows text-only display in the mobile menu as requested.
Hi @MMast ,
Trying adding css to the base.css.
@media (max-width: 768px) {
a.list-social__link.link:before {
content: 'Instagram';
color: #fff;
width: 100%;
}
a.list-social__link.link svg {
display: none;
}
}
If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
The code you provided shows up like this. Can you make the text black and no underline please!
Hi @MMast ,
Try adding below css to base.css file.
@media (max-width: 768px) {
a.list-social__link.link:before {
content: 'Instagram';
color: #000;
width: 100%;
}
a.list-social__link.link svg {
display: none;
}
a.list-social__link.link {
text-decoration: none;
}
}
If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
This worked, thank you!