Changing navigation icons to words

Contribute UX
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
image376×197 7.06 KB

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