Change icon to text in mobile menu

[verysandwich]

Hello,

I have a link on my nav bar that I have replaced with an icon. I’ve stylized it so it looks fine on desktop, but I would like it to just be text on the mobile menu. Is that possibe? Thanks!

[mldarshana]

Hi There @verysandwich

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.x-btn-navbar i.x-icon-bars::before {
    content: "Menu";
    font-size: 18px;
}

Thanks!

[verysandwich]

I was actually looking to change the twitter icon I’ve added to the nav bar to say “Twitter” when it’s mobile. Thanks!

[ruenel]

Hello @verysandwich,

It seems that there is an issue with your site.

Please check with your hosting to resolve the issue above. Meanwhile, you might be able to use this code to display twitter text on smaller screens.

@media(max-width: 979px){
  .x-nav i.x-icon-twitter-square::before {
    content: "Twitter";
  }

  .x-nav .x-icon.x-icon-twitter-square {
      background-color: transparent;
      color: white;
      font-family: "Lato",sans-serif;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      line-height: 1.5;
      white-space: normal;
      letter-spacing: 0.06em;
      text-transform: uppercase;
  }
}

Hope this helps. Please let us know how it goes.

[verysandwich]

Thanks, it worked perfectly!

[jade]

You’re most welcome.