How to change menu text on mousehover

See more:

CSS3

navigation

MenuItem

Hey all,

I wanted to change the text of my existing header menu on my site. Is there any way that this can be done so that when you hover over a menu item, the text changes?

I want to make sure that I'll be able to use the existing menu that I have in my header and if possible the existing class for the site nav.

Each menu item would need its own unique text for the hover over.

Thanks all!

What I have tried:

The only code in place within the theme.css for the nav that may be relevant:

.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
  border-bottom-color: none !important;
color: #eae5d3}

@media only screen and (max-width: 989px) {
  .site-nav__link--button {
    font-size: calc(var(--font-size-base) * 1px); } }

.site-nav__link--button:focus, .site-nav__link--button:hover {
  color: var(--color-text-focus);
}