[ 解決済 ] menuと表示する方法

[momo]

ベクトルさんのサイトはハンバーガーメニューにmenuと表示されますが、真似してみる場合は、どうすると良いでしょうか？

ベクトルさんのメニューのイメージを添付写真にします。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

ベクトルさんのサイトのテーマは Lightning ではなく、Katawara です。

Katawara はなにもしなくても MENU の文字が表示されます。

> 真似してみる場合は、どうすると良いでしょうか？

テーマを変更しましょう… だとご期待の回答にはならないと思いますので、
Lightning で MENU の文字を表示する CSS を考えてみました。

これでいけると思います。

.vk-mobile-nav-menu-btn {
  text-indent: 2px;
  font-size: 10px;
  padding-top: 28px;
  overflow: visible;
  border: none;
}
.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}

[momo]

対馬様

お陰様で大成功です。期待通りになりました。
現在G3β利用中にて子テーマは使ってないので、追加CSSに入れて見ました。

そして私が見たのはkatawaraだったのですね。
この時、スマホで見ていたので気が付きませんでした。

お察しいただいた上でのご回答ありがとうございました。

[対馬 俊彦]

念のため、補足です。

MENU ボタンを上部に表示する場合はこれで OK ですが、
設定を変えて下部に表示するとおかしな位置になってしまいます。

そこまで考慮した CSS にはなっていませんので、
このトピックを見てやってみる方はご注意ください。

[momo]

対馬様、追記もありがとうございました。
私の場合は、今回の形で満足しておりますので、これ以上のカスタマイズは致しません。

現在G3用の子テーマが無いので、追加CSSでこの形のmenuを取っておりますが、将来G3子テーマがダウンロード可能になったら子テーマに入れて半永久的に使わせていただきます。

子テーマは使わないで、すっぴんのLightningでと時々思うのですが、やっぱり子テーマが私のレベルですらも必要ですね。

[対馬 俊彦]

先日、Lightning で Katawara のように MENU を表示する CSS を提示しましたが、
自分でも G3 で制作中のサイトでこのやり方を採用して、以下のことに気がつきました。

• 背景が濃色だと見た目が残念
• 開いたモバイルナビがボタンに近すぎる

上記の点を調整した CSS がこちらです。

.vk-mobile-nav-menu-btn {
  text-indent: 2px;
  font-size: 10px;
  padding-top: 26px;
  overflow: visible;
  border: none;
  background-position: top;
  height: 40px;
}
.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}
.vk-mobile-nav {
  padding-top: 50px;
}

[momo]

対馬様
私は問題を感じずに愛用させて頂いてましたが、早速、新バージョンに差し替えさせて頂きました。
ありがとうございます。

[投稿者]

投稿