Changing navigation icons to words

UX
1

Hello community,

I am trying to replace the navigation icons with words for medium and large viewports.

Any feedback is appreciated.

Thank you

2

It’s not entirely clear what you’re asking for here. Can you please add some screenshots / mockups of what you’re referring to?

4 Likes
3

@Johani, thanks for the quick reply.
I want to replace these two icons with words such as search and menu.
28%20AM

4

Right but… why? Now you have to localize those words, and they likely won’t fit on mobile.

6 Likes
5

On mobile you can’t use text because of space, on desktop you can try to use words even if it’s not the best.

image

image

Create a new theme component and add only in the Desktop > CSS tab:

#search-button:before {
  content: "Search";
  color: #7c7c7c;
  font-weight: bold;
}

.fa.d-icon.d-icon-search.svg-icon.svg-node {
  color: transparent;
}

#toggle-hamburger-menu:before {
  content: "Menu";
  color: #7c7c7c;
  font-weight: bold;
}

.fa.d-icon.d-icon-bars.svg-icon.svg-node {
  color: transparent;
}

.d-header-icons .icon {
  &:hover, &:focus {
    background-color: transparent;
  }
}


#toggle-hamburger-menu:hover:active, 
#search-button:hover:active, 
.header-dropdown-toggle,
#toggle-hamburger-menu, 
#search-button {
  padding-left: 35px;
}

Remember to add the component to the active theme(s) on your site.

You can customize the CSS as you like but IMHO the icons are always the best choice.

7 Likes
6

@codinghorror @dax thank you for your reply.
I agree with you about small screens. Since the design has not been finalized yet, I will make sure to take your feedback into account before shipping. :pray:

3 Likes
7

Is this an accessibility issue? If so, is it for people using screen readers or screen magnifiers? If it’s the former night there be a way to leave the icon on the page but provide text for the screen reader?

If this is to improve accessibility then it would make sense to see that the words use could be localized.

2 Likes