Lightning のモバイルナビをフェードインに切り替えるカスタマイズ手順

Lightning のモバイルナビが開くときの動作はスライドインで、スライド方向は 上から・左から・右から のうちから選べるようになっています。

モバイルナビのデザインによっては、フェードイン動作の方がいいなぁ...ってときがあります。

例えば、このサイトのようにタイルスタイルのモバイルナビだとフェードインにしたくなります。（好みは人それぞれですが）

実際にこのサイトでカスタマイズを行ってありますので、スマホで表示して動きをご確認ください。

カスタマイズ手順

子テーマの style.css などに以下の CSS を追加します。

#vk-mobile-nav.vk-mobile-nav {
    left: 0;
    opacity: 0;
    visibility: hidden;
}
#vk-mobile-nav.vk-mobile-nav.vk-mobile-nav-open {
    opacity: 1;
    visibility: visible;
}

/* スライド方向がドロップでなければ↓これは不要 */
#vk-mobile-nav.vk-mobile-nav.vk-mobile-nav-drop-in:not(.vk-mobile-nav-open) {
    top: unset;
}

この CSS は Lightning Pro と Katawara でも使えます。