[ 解決済 ] 透過のグローバルメニューのメニューをマウスホバー時テキストが入れ替わる変更したい

興味があったので、CSS でカスタマイズしてみました。

以下の CSS を追加すれば、マウスホバーで文字が英語から日本語に切り替わります。
タブレットなどのモバイル端末はカスタマイズが適用されず、日英併記のままです。

Evergreen サイトだとこのままでいけると思います。

Evergreen 以外でも使えるようにしたつもりですが、確認が十分じゃないかもしれません。
ここ、こうするといいよ…ってご意見があればお願いします。

@media (min-width: 992px) {

  :root {
    --ujs_menu_height: 62px; /* 実際のグローバルナビの高さをここに入れてください */
    --ujs_text_height: 20px;
  }

  .device-pc .global-nav-list>li>a {
    position: relative;
    overflow: hidden;
    padding-top: calc( var(--ujs_menu_height)  / 2 );
    padding-bottom: calc( var(--ujs_menu_height)  / 2 );
    min-width: 100px; /* 必要に応じて書き換えてください（メニューの文字数が多い場合） */
  }
  .device-pc .global-nav-list>li .global-nav-name {
    height: var(--ujs_text_height);
    position: absolute;
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2  + var(--ujs_text_height));
    opacity: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
  }
  .device-pc .global-nav-list>li .global-nav-description {
    font-size: 14px;
    height: var(--ujs_text_height);
    padding: 0;
    opacity: 1;
    position: absolute;
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2 );
    opacity: 1;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all .5s;
  }
  .device-pc .global-nav-list>li>a:hover .global-nav-name {
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2 );
    opacity: 1;
  }
  .device-pc .global-nav-list>li>a:hover .global-nav-description {
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2  - var(--ujs_text_height));
    opacity: 0;
  }

}

CSS の追加方法がわからない場合は以下のページが参考になります。

できる！CSSカスタマイズ

> var(–ujs_menu_height)などが何処に定義してあるのかも判らない状態ですが

先頭の :root { } のところで定義してあります。

var(–ujs_menu_height) → 62px
var(–ujs_text_height) → 20px
に置き換わって計算(calc)されます。

グローバルナビの高さやフォントサイズなどをカスタマイズしてある場合に対応しやすいようにこういうやり方をしていますが、特にいじっていなければ 62px / 20px のままの設定でいけると思います。