1. ホーム
  2. 使い方 Blocs
  3. 設計
  4. ナビゲーションシンボルスタイルの切り替え

ナビゲーションシンボルスタイルの切り替え

で構築されたウェブサイト Blocs 使用 ブートストラップ フレームワーク。 Bootstrapを使用するサイトをモバイルデバイスで表示すると、標準のナビゲーションリンクがボタンからアクセスできるトグルメニューになります。これは、モバイルユーザーエクスペリエンスを向上させるため、通常の動作です。

トグルシンボルの変更

Bootstrapは標準のハンバーガーシンボルを表示します トグルメニューボタンの場合、サイトの特徴を高めるためにこれを変更したい場合があります。 Blocs このシンボルの置換は非常に簡単なプロセスになります。 最初にナビゲーショントグルアイテムを選択します クリック デザイン キャンバス上に配置するか、非表示の場合はレイヤー ツリーで見つけます。

サイドバーのインスペクターオプションで、ラベルの付いたドロップダウンボタンに移動します シンボル、デフォルトでは、このオプションはに設定されています 標準ハンバーガー.

シンボルの色を切り替え

トグル メニュー シンボル スタイルを設定するだけでなく、サイドバー インスペクターにあるカラー ウェルを使用してその色をカスタマイズすることもできます。

重要

トグル メニュー シンボルはインライン SVG です。つまり、カスタム クラス (.svg-メニュー アイコン) およびクラス エディターの SVG コントロール。

ナビゲーション トグル シンボルのデフォルトの色は、ネストされているナビゲーション バーを介して制御されます。 ナビゲーション バー Bric ナビゲーションテーマを暗い色または明るい色に設定できます。このテーマは、の背景色を参照します。 Bloc ナビゲーション要素を含みます。 ダークテーマがアクティブな場合、トグルシンボルは白で、ライトテーマがアクティブな場合、トグルシンボルは暗くなります。

トグル項目を選択すると、右側にある関連要素のドロップダウンオプションを使用して、親のナビゲーションバーにすばやくアクセスできます。 出演タイトル.

ここから、ナビゲーションのテーマを設定できます。

外観を設定することも可能です トグルメニュー 設定するだけでなく ブレークポイント あなたはそれがに見えるようにしたいのです。

28年2022月XNUMX日に更新

この記事は役に立ちましたか?

関連記事