Change Menu Text on Hover

Hey northorie,
To change the menu text of the “home” menu item from “home” to “go” on hover, you will first need to know the menu item ID,
for example “#menu-item-3638” then adjust this css to suit:

ul.menu li#menu-item-3638 a:hover .avia-menu-text {
  color: transparent; 
  justify-content: center;
  display: inline-flex;
  flex-direction: column-reverse;
}

ul.menu li#menu-item-3638 a:hover .avia-menu-text::after {
  content: "Go";
  color: black;
  justify-content: center;
  display: inline-flex;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Go to your menu item and hover over the “remove” link, then at the bottom of the page the link URL will show, look for the ID number, like:
/wp-admin/nav-menus.php?action=delete-menu-item&menu-item=3638&_wpnonce=265b3adf4c
note the text: menu-item=3638, 3638 is the ID, use it in the css like this: #menu-item-3638

If you have trouble, link to your page so we can examine.

Best regards,
Mike

Hi,
Try adding this css:

ul.menu li a:hover .avia-menu-text {
    border: none;
}

Best regards,
Mike

Hi,
True, I didn’t find a solution for that.

Best regards,
Mike

Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.av_seperator_small_border .av-main-nav>li>a>.avia-menu-text {
    border-right-style: solid;
    border-right-width: 1px;
    padding-right: 13px;
    margin-right: -13px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike