メニューがあるとないとでは、サイト全体の印象が大きく変わります。サイト全体の見栄えを良くし、訪問者が探しているものを見つけやすくし、特定のページをクリックしてもらうこともできます。
WPBeginnerでは、メニューのスタイルについてさまざまなクリエイティブな方法を見てきました。
この投稿では、WordPressのナビゲーションメニューを5種類の方法でスタイル設定する方法を紹介します。
なぜWordPressのナビゲーションメニューにスタイルをつけるのか？
WordPress のナビゲーションメニューはサイトのロードマップであり、訪問者を最も重要なページに導きます。ほとんどのサイトの上部に外観されるため、ユーザーの注目を集め、コンテンツの探索方法に影響を与える絶好の場所です。
ナビゲーションメニューのスタイリングは、単に見た目を美しくするだけではありません。サイトのユーザーエクスペリエンスを大幅に向上させ、ひいては検索エンジン最適化（SEO）を高めることができます。
メニューのデザインが使いにくければ、訪問者は探しているものを見つけるのに苦労し、フラストレーションを感じて去ってしまうかもしれません。一方、明確で視覚的に魅力的なメニューは、様々なセクションをクリックするよう促し、サイトにより多くの時間を費やすことができます。
その結果、サイトのページビューを増やし、直帰率を減らすことができる。
このガイドでは、WordPressのテーマや使いやすさに応じて、ナビゲーションメニューをスタイリングするためのさまざまな方法を説明します。以下のクイックリンクを使用して、このチュートリアルをナビゲートし、あなたに最適な方法を見つけることができます：
- Method 1: Customize Your Navigation Menu With Full-Site Editor (Block Themes)
- Method 2: Customize Your Navigation Menu With Theme Customizer (Classic Themes)
- Method 3: Customize Your Navigation Menu With a Page Builder Plugin (Recommended)
- Method 4: Customize Your Navigation Menu With Visual CSS Editor (More Customizable)
- Method 5: Customize Your Navigation Menu With Code (Advanced)
方法1：フルサイトエディターでナビゲーションメニューをカスタマイズする（ブロックテーマ）
ブロックテーマを使っていて、フルサイトエディターを使ってナビゲーションメニューをスタイリングしたい場合は、この方法をご利用ください。
まず、WordPressダッシュボードに移動し、外観 ” エディターに移動します。
ここでは、ブロックテーマのさまざまな部分をカスタマイズするオプションが表示されます。
ナビゲーション』をクリックしてください。
次のページで、鉛筆の「編集」アイコンをクリックします。
ブロックエディターが開き、ナビゲーションブロックを編集できます。
ブロックエディターに入ったら、WordPressウェブサイトのページをナビゲーションメニューとして表示する「ページリスト」ブロックをクリックします。
そして、『編集』をクリックする。
ポップアップ・ウィンドウが表示され、ページ・リスト・ブロックの編集が可能になったことを知らせます。ブロックの編集、削除、並び替え、新しいメニュー項目の追加ができます。
Edit（編集）」をクリックして続けます。
ナビゲーションメニューのブロックエディターは、ページや投稿を編集するときと同じように機能します。カスタムリンク、コールトゥアクションボタン、検索フォーム、サイトロゴなど、他のメニュー要素も自由に追加できます。
フルサイト編集でのメニュー管理についてより深く知りたい場合は、フルサイト編集ガイドのナビゲーションメニューの編集方法のセクションをご覧ください。このセクションではサブメニューの作成についても説明しています。
さて、スタイリングに取りかかろう。どのブロックでもクリックしてください。
ブロックによっては、ツールバーにいくつかのカスタマイズ設定があります。例えば、ページリンクを選択すると、太字にしたり、斜体にしたり、打ち消し線を入れたり、必要に応じて並べ替えたりすることができます。
これらのツールを使って、ひとつのメニュー項目を他の項目から際立たせることができる。
右側の設定パネルで「ブロック」タブに切り替え、その下の「スタイル」タブに移動する。
ここでは、ブロックの色、タイポグラフィ、寸法、枠線、影をカスタマイズできます。
ブロックには初期設定のスタイルがあります。例えば、ページリンクを編集している場合、「フォントサイズ」や「幅」といったオプションしか表示されないかもしれません。
でもご心配なく。これらのオプションの横にある3つのドットメニューをクリックするだけで、フォントファミリーや文字間隔の変更など、さらなるカスタマイザーの有効化が可能です。
同様に、ナビゲーションメニューにボタンブロックがある場合、それをクリックすると、スタイル、テキスト、背景色、タイポグラフィ、寸法、枠線、シャドウまでカスタマイズできるオプションが表示されます。
詳しくは、コールトゥアクションボタンの追加方法をご覧ください。
ナビゲーションメニューの背景色を変更したい場合は、テーマのヘッダーテンプレートを編集する必要があります。
それを開くには、上部にある『ナビゲーション』と書かれたコマンド検索フィールドをクリックするだけだ。そして、『Header』と入力してEnterキーを押す。
リスト表示を開き、グループを選択する。
このグループはヘッダーのサイトタイトルとナビゲーションメニューで構成されます。
次に、ブロック設定サイドバーの「スタイル」タブを開き、「色」セクションの「背景」をクリックします。
その後、ヘッダーテンプレートの背景色を選択するだけです。
ナビゲーションメニューのスタイルに満足したら、「保存」ボタンをクリックするだけで、WordPressブログやサイトに新しいメニューとヘッダーが表示されます。
デモサイトのナビゲーションメニューはこんな感じです：
あなたが持つスタイルの選択肢は、特定のテーマの全体的なスタイル設定オプションに依存することに留意してください。
テーマのグローバルスタイルをカスタマイズしたい場合は、右上の「スタイル」ボタンをクリックする必要があります。
ここから、サイト全体のタイポグラフィ、色、レイアウトを変更できる。
注：ここで行った変更はナビゲーションメニューだけでなく、テーマの他の部分にも影響することを忘れないでください。
詳しくは、フルサイト編集ガイドのサイトのグローバルスタイルの変更方法をご覧ください。
方法2：テーマカスタマイザーでナビゲーションメニューをカスタマイズする（クラシックテーマ）
この方法は、ビルトインのテーマカスタマイザーを使ってナビゲーションメニューをスタイリングしたいクラシックWordPressテーマのユーザー向けです。
先ほどの方法と同様、メニュー項目そのものを管理するのではなく、メニューの外観をスタイリングすることに焦点を当てます。
クラシックテーマでメニューを作成・管理する方法を知りたい方は、WordPressでナビゲーションメニューを追加するガイドをご覧ください。カスタマイザーでのメニューの作成、メニューの場所への割り当て、ウィジェットとしてのメニューの追加について説明しています。
テーマカスタマイザーを使用するには、WordPressダッシュボードに移動し、外観 ” カスタマイズに移動します。
ここでは、テーマの様々な側面をカスタマイズするオプションが表示されますが、使用しているテーマによって異なります。ほとんどの場合、WordPressテーマには「メニュー」オプションがありますが、サードパーティの開発者が他の設定を追加することもあります。
例えば、Astraテーマにはメニューカスタマイザーのための専用ヘッダー・ビルダーがあります。特別なメニュー設定が追加されているかどうか、テーマのドキュメンテーションを必ず参照してください。
もしあなたのテーマがそのようなカスタマイズオプションを持っていなくても、心配しないでください。カスタムCSSを使って簡単にメニューをスタイルすることができます。
まず、「メニュー」セクションをクリックする。
次のページで、歯車の「設定」をクリックし、「CSSクラス」を選択します。
これにより、各メニュー項目に固有のCSSクラスを割り当てることができ、後で個別にスタイルを設定することが有効化されます。
次に、パネルを下にスクロールする。
そして、プライマリーメニューを開く。
今したいことは、修正したいメニュー項目を見つけて、クリックして展開することです。
カスタムCSSクラスを追加する新しいオプションが表示されます。下の例では、CSSクラスcontact-usをお問い合わせページに追加しています。
メニュー項目にCSSクラスを割り当てたら、テーマカスタマイザーのメインメニューに戻ってください。
次に、「追加のCSS」をクリックする。
ここでは、ナビゲーションメニューをスタイル設定するためのカスタムCSSコードを追加することができます。
CSSクラスと16進カラーコードを自由に変更してください：
メニュー項目の背景色を変更する
次のコード・スニペットは、CSSクラスcontact-usを持つメニュー項目の背景色を緑色（#E3FFA8）に変更し、角丸（枠線：5px）を追加します：
.contact-us {
background-color: #E3FFA8;
border-radius: 5px;
}
初期設定メニューリンク色の変更
このコード・スニペットは、プライマリ・メニュー・リスト（#primary-menu-li a）内のすべてのメニュー・リンクの色を赤（#ff0000）に変更します：
.primary-menu li a {
color: #ff0000;
}
あなたのテーマのプライマリー・メニューのCSSクラスは、私たちのものとは違って見えるかもしれないことに注意してください。
あなたのテーマのCSSクラスのプライマリメニューが何であるかを確認するには、ナビゲーションメニューエリア周辺でinspectツールを使用することができます。
次に、「menu」または「navigation-menu」と書かれたHTMLコードを探す。その横にそれを定義するCSSクラスがあるはずだ。
メニュー項目にマウスオーバー効果を追加する
このコード・スニペットは、プライマリ・メニュー・リスト（#primary-menu li）内のすべてのメニュー項目を対象とし、マウス・オーバー効果を追加します：
.primary-menu li a:hover {
background-color: #a6e4a5;
color: #666;
border-radius: 5px;
}
ユーザーがメニュー項目にマウスオーバーすると、背景色がライトグリーン（#a6e4a5）に変わり、文字色がダークグレー（#666）に変わり、角丸の枠線（border-radius: 5px）が追加されます。
WordPressで透明なナビゲーションメニューを作成する
このCSSコード・スニペットは、ナビゲーション・メニューを透明にすることができます：
#site-navigation {
background-color:transparent;
}
このエフェクトを使うと、背景画像と調和し、サイトにクリーンでモダンな雰囲気を与えることができます。
もっとインスピレーションを得たい方は、以下のガイドをご覧ください：
これらはほんの一例です。同じ方法を使いたいが、Additional CSSセクションが見つからない場合は、テーマカスタマイザーの問題を解決する方法をご覧ください。
方法3：ページビルダープラグインでナビゲーションメニューをカスタマイズする（推奨）
この方法は、ナビゲーションメニューの外観をもっとコントロールしたいけれど、初心者にもやさしい方がいいという方に最適です。また、サイト構築の初期段階で、まだ立ち上げていない場合にも最適な設定です。
ページビルダープラグインを使用すると、コードを記述することなく、ドラッグ＆ドロップ機能を使って視覚的にサイトのレイアウトをデザインすることができます。これは、完全な初心者に最適です。
このセクションでは、ページビルダープラグインとしてSeedProdを使用します。SeedProdはユーザーフレンドリーなインターフェースを提供し、ナビゲーションメニューを目立たせるための追加ブロックや機能を含んでいます。
注：テーマビルダー機能はPro版でしか利用できないため、ここではSeedProd Proを使用します。しかし、SeedProdがどのようなものかを調べるために、無料版をご自由にお使いください。
ステップ1: SeedProdのインストールと有効化
まず、WordPressサイトにSeedProdプラグインをインストールし、有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化したら、WordPressダッシュボードからSeedProd ” Settingsに移動します。次に、SeedProdのライセンスキーを入力し、’Verify key’ボタンをクリックします。
ステップ2：SeedProdテーマテンプレートキットを選ぶ
では、SeedProd ” Theme Builderにアクセスしてください。ここでゼロからカスタマイザーのWordPressテーマを作成することができます。
テーマテンプレートキット」ボタンをクリックすると、デザイン済みテンプレートのギャラリーを閲覧できます。
このチュートリアルでは、Smile Craft Medical Website Themeを使用します。しかし、あなたのビジネスに合ったテンプレートを自由に選んでください。
虫眼鏡のアイコンをクリックして、これらのテーマテンプレートキットをプレビューし、どれがあなたのサイトのスタイルに合うか確認することができます。
気に入ったテーマテンプレートが見つかったら、オレンジ色のチェックマークアイコンをクリックしてテンプレートパーツをインポートします。
SeedProdは、ヘッダー、フッター、ホームページなどのような重要なサイトセクションを作成します。これらはすべてドラッグアンドドロップビルダーを使って視覚的に編集することができます。
ステップ3：メニューデザインのカスタマイズ
テーマテンプレートのインストールが完了すると、テーマビルダーのページに戻ります。
SeedProdテーマテンプレートでは、ナビゲーションメニューはヘッダーテンプレート部分にあります。
ヘッダーテンプレートを編集するには、マウスオーバーして「デザインを編集」リンクをクリックするだけです。ドラッグ＆ドロップエディターでテンプレートが開きます。
テーマによって、ナビゲーションメニューブロックとその他のブロックで構成されるヘッダーセクションが表示されます。
メニューを編集するには、Nav Menuブロックをクリックします。左サイドバーにブロック設定のリストが表示されます。
デフォルト設定では、SeedProdは’シンプル’メニューを使用し、使用するテーマテンプレートに基づいたメニューを作成します。しかし、標準WordPressメニューエディター（外観 ” メニュー）を使用してすでに作成した既存のメニューを使用するために、’WordPressメニュー’オプションを使用することもできます。
この2つの違いを説明しましょう。シンプルな方法では、ページビルダーのインターフェースの中で直接リンクを追加、編集、削除することができます。
新しいメニュー項目を作成するには、「+ 新規項目を追加」ボタンをクリックします。
ここでは、テキストラベルとリンクURLを入力できます。
次に、リンクを新しいウィンドウで開くように選択し、（必要であれば）nofollow属性を追加します。このように：
項目の横にある三本線のボタンをクリックし、上下にドラッグすることでメニュー項目を並べ替えることもできる。
メニュー項目を削除するには、その項目にマウスオーバーし、横にあるゴミ箱アイコンをクリックするだけです。
この設定の欠点は、ドロップダウンメニューを作成できないことです。それが「シンプル」と呼ばれる理由です。
一方、「WordPressメニュー」オプションでは、SeedProdエディターから直接メニュー項目を管理することはできません。メニューエディターで行う必要があります。
既存のメニューがドロップダウンメニューであれば、この方法で表示することができます。
どの方法を選んでも、フォントサイズやメニュー項目間の間隔をカスタマイズしたり、テキストの区切りを追加したり、配置を調整したりすることができます。
Advanced’タブでは、さらに多くのカスタマイザー設定が可能です。
リストのレイアウトを横書きから縦書きに変更したり、タイポグラフィを調整したり、テキストやマウスオーバーの色を変更したり、テキストの影を追加することもできます。
下にスクロールすると、デスクトップ、タブレット、モバイル端末用にパディングとマージンをコントロールできます。
こうすることで、どの画面サイズでもメニューのナビゲーションが簡単になります。
メニューを目立たせたい？
SeedProdでは、より魅力的なユーザー体験のためにアニメーションを追加することができます。詳しくはWordPressでCSSアニメーションを追加する方法のステップバイステップガイドをご覧ください。
ナビゲーションバーに新しいコールトゥアクションボタンを追加したい場合、SeedProdのButtonブロックを使用することができます。
左側のサイドバーにあるブロック・ファインダーを開き、Buttonブロックを見つけるだけです。
次に、ブロックをヘッダーにドラッグします。
完了したら、ボタンのコールトゥアクション、リンク、スタイリング、その他の設定をカスタマイズするだけです。
また、ユーザーがスクロールダウンしてもページの先頭に固定表示されるスティッキーメニューを作成することもできます。こうすることで、別のページに行きたいときにいちいち上に移動する必要がなくなる。
これを行うには、紫色の線が表示されるまでセクションにマウスオーバーし、歯車の「設定」アイコンをクリックするだけです。
ここで、「詳細」タブに切り替える。
次に、「ポジション」メニューまでスクロールダウンする。
ここでは「先頭固定表示」を選ぶ。
その後、トップオフセットにゼロを追加し、高いzインデックス番号（999など）を追加する。これは、ヘッダーが常にページの真上に表示されるようにするためです。
カスタマイズしたナビゲーションメニューに満足したら、「保存」ボタンをクリックします。
ステップ4：カスタマイザーWordPressテーマを公開する
この段階で、新しいカスタマイザーWordPressテーマを使用する準備が整いました。有効化するには、「テーマビルダー」ページに戻り、「SeedProdテーマを有効化」ボタンをクリックしてください。
あとは、あなたのサイトを表示し、新しいカスタムナビゲーションメニューをチェックするだけです。
デモサイトのナビゲーションメニューはこんな感じです：
方法4：ビジュアルCSSエディターでナビゲーションメニューをカスタマイズする（よりカスタマイザーになる）
この方法は、WordPressのビルトイン機能よりも多くのカスタマイズオプションを提供しますが、ページビルダープラグインを使用するほど柔軟ではありません。とはいえ、テーマを完全に置き換えることなくナビゲーションメニューのデザインを調整したい場合には最適なソリューションだ。
この方法は、スタイリングオプションがないクラシックテーマを使っているが、方法2のCSS編集に慣れていない人にとっても良い選択肢となる。
ここでは、CSS Heroと呼ばれるプレミアムWordPressビジュアルCSSエディタープラグインの使い方をご案内します。CSS Heroを使えば、コードを書かずに視覚的にサイトをデザインすることができます。HTMLやCSSの知識は必要ありません。
さらに詳しく: CSS Heroのレビューをご覧ください。WPBeginnerユーザーは、限定クーポンコードでCSS Heroを最大34%節約することもできます。
まず、WordPressにCSS Heroプラグインをインストールします。詳しくはWordPressプラグインのインストール方法をご覧ください。
CSS Heroプラグインを有効化すると、WordPress管理ツールバーに’CSS Hero’という新しいボタンが表示されます。このボタンをクリックすると、ビジュアルエディターが起動します。
CSS HeroはWYSIWYGインターフェースを採用しています。ボタンをクリックすると、画面の左側にCSS Heroペインと並んでサイトが開きます。
ナビゲーションメニューを編集するには、ナビゲーションメニューの上にマウスを移動させます。CSS Heroが枠線でハイライトします。ハイライトされたエリアをクリックすると、メニューのカスタマイザーが開始されます。
CSS Heroでは、ナビゲーションメニューコンテナの背景、タイポグラフィ、枠線、スペーシング、リスト、さらに追加エフェクトなど、さまざまな側面を編集できます。
例えば、メニューの背景色を変更したいとします。背景」をクリックすると、ユーザーフレンドリーなインターフェイスが開き、新しい色、グラデーション、画像を選択できます。
変更を加えると、右側のサイトプレビューに反映されます。
また、メニュー項目にボックスシャドウを追加して、より目を引くようにすることもできます。
これを行うには、「Extra」タブにナビゲーションします。
そして、『Make Shadow』をクリックする。
ここで、シャドーの設定を編集することができます。
あとは、影がどのように見えるかを弄るだけだ。
影の向き、ぼかしや広がりの質、位置などを自由にドラッグできる。
CSS Heroのインターフェースは何でも変更できるので、あなたのサイトに最適なものを見つけるために実験することができます。
Pro Tip:方法2のステップに従って個々のメニュー項目にCSSクラスを追加した場合、CSS Heroを使用して特定のメニュー項目をターゲットにしてカスタマイズすることで、ナビゲーションメニューの外観をさらに細かくコントロールすることができます。
カスタマイザーメニューに満足したら、「保存」ボタンをクリックして変更内容を保存します。
CSS Heroでできることについては、これらのガイドをお読みください：
方法5：ナビゲーションメニューをコードでカスタマイズする（上級者向け）
この方法はコードに慣れているユーザーに適しています。また、あなたのテーマが初期設定にカスタマイザーメニューを含んでいない場合、カスタマイザーメニューを作成することもできます。
カスタム・コード・スニペットを追加するには、functions.phpやheader.phpなどのテーマ・ファイルを編集する必要があるため、最初は難しく感じるかもしれません。しかし、それを簡単にする方法があります。
WPCodeと呼ばれるプラグインを使用することをお勧めします。コアファイルを変更することなく、WordPressサイトにカスタムコードを追加する安全でユーザーフレンドリーな方法を提供します。
WordPressテーマでカスタムナビゲーションメニューを追加する方法についてのガイドは、WPCodeでメニューを作成する手順を説明することができます。
メニューを作成したら、これらのチュートリアルを参照してください。
- WordPressでナビゲーションメニューにイメージアイコンを追加する方法
- WordPressのヘッダーメニューにボタンを追加する方法
- WordPressで先頭固定表示ナビゲーションメニューを作成する方法
それぞれ、WPCodeを使ってメニューをカスタマイズする方法が含まれています。
WordPressナビゲーションメニューカスタマイズの究極ガイド
WordPress ナビゲーションメニューのスタイリングの基本をご理解いただけたと思います：
- WordPressサイトにメガメニューを追加する方法。 メガメニューを使用すると、サブカテゴリーを含めることができ、広範なサイトコンテンツを整理するユーザーフレンドリーな方法を提供します。
- モバイル対応のレスポンシブWordPressメニューの作り方。 このガイドでは、さまざまな画面サイズに対応するレスポンシブメニューの作成方法を説明します。
- WordPressでフルスクリーンレスポンシブメニューを追加する方法。 このチュートリアルでは、有効化したときに画面全体に広がり、大胆なナビゲーション体験を提供するフルスクリーンメニューを実装する方法を紹介します。
- WordPressテーマでスライドパネルメニューを追加する方法。 スライドパネルメニューは、ユーザーがスワイプまたはボタンをクリックしてメインナビゲーションを表示するまで非表示にする、省スペースソリューションです。
- WordPressで縦型ナビゲーションメニューを作成する方法。縦型ナビゲーションメニューは、サイドバーなどの縦長のスペースに多数のメニュー項目を表示するのに最適な方法です。
- WordPressメニューにソーシャルメディア・アイコンを追加する方法。ソーシャルメディアのアイコンをナビゲーションメニューに直接組み込んで、訪問者が簡単にあなたとつながることができるようにしましょう。
- WordPressで折りたたみ可能なサイドバーメニューを作成する方法。たくさんのページをお持ちですか？サイドバーに折りたたみ可能なメニューを追加して、ユーザーがサイトをナビゲートしやすくしましょう。
この記事でWordPressのナビゲーションメニューのスタイルを学ぶことができたでしょうか。また、WordPressのデザイン要素に関する究極のガイドや、WordPressでカスタムページを作成するための初心者向けガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Sydney Peason
The “Menu” option has disappeared under my “Appearance” menu option > is there another way to see the container CSS of my menu and options?
Thanks!
WPBeginner Support
IF you’re using a block theme that does not have the appearance menu then you can use Inspect element to see the CSS container information. You can see our guide below on using Inspect Element:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Kristyna
Hello, I need advice, please:
I have successfully added CSS to make one of my menu items different in color. However, when I scroll down, my fixed navigation primary menu comes down with me, and the changed color of that one item changes back to its original – How do I keep the new color of that one item even when scrolling down?
Thanks!
WPBeginner Support
Your theme may modify the menu when you are scrolling down. If you use inspect element you should be able to select the menu item while scrolled down to add your CSS. We have a guide on using inspect element you can take a look at below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Venkat Vavilala
Hi,
I want to increase menu font size. How can I do this?
If it is default, then how can I customize?
Please show me easy method to increase the menu font size
WPBeginner Support
It would depend on which method from this article you plan on using. As an example, if you use the CSS method then you would use inspect element the same as under method 2’s examples and modify the font-size
管理者
Budi Santoso
Hello Admin.
How the Orange ribbon navigation menu in this site was made?
Thanks
WPBeginner Support
To understand that you would want to take a look at our guide on using inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
maria
how did you make the menu for this site
did you have to edit the theme files ?
thanks
WPBeginner Support
Our theme was one we custom created
管理者
Trish
I am wanting to create a menu on the shop page of my woo commerce site, horizontally, that has all the categories of product that is sold. How can I do that, please? Thank you all for your help in advance.
WPBeginner Support
If your theme has a menu in that location you could set up a normal menu using:
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
Then, you can use conditional logic to only have it appear on your shop page using our article here: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
管理者
Kushal Sonwane
Though it was a great task to do, but after reading this article, it is very simple to customise navigation menus.
Thanks.
WPBeginner Support
You’re welcome
管理者
Lisa
I am very new to doing this and I am creating a site in WP using the theme Oceanwp. I have done as you have suggested by clicking on CCS from the menu. I am trying to remove the arrow on my drop down menu and nothing I try works at removing it.
Thanking you in advance for any help.
WPBeginner Support
Hi Lisa,
You may want to reach out to theme authors, they would be able to help you with that.
管理者
Anirudhya
sir which theme you are using. iam starting a wordpress blog,i want a simple layout blog for my educational purpose.
WPBeginner Support
Hi Anirudhya,
We are using a custom theme made specifically for WPBeginner.
管理者
Bobby
Hi, how about with HTML code?
I want to add a header to the neseted menus. But I don’t kow where or how to put it.
Daniela
Hi,
I Would like to change the appearance of only the menu I have added for my salespage. I would like to change the height and add a logo.
I am not a pro and I have tried some things to see if anything changes in the menu, but it doesn’t. This is what I have tried:
#Salespage-menu {
background:#2194af;
height:40px;
}
Can you please help me on my way?
Thank you so much for your effort!
Eugene
Hi Guys,
I have an issue with my nav menu that I really would be glad of some help with pleas… The primary menu itself is perfect looking, the problem is with the submenu which drops down with a large gap approx 100px or so in size between it and the parent above.
When I try to navigate onto the submenu it simply disappears from view.
I have tried everything I can think of so far to move it directly up under the parent menu so that it will remain open and clickable but I have failed so far.
This is the Custom CSS being used for the Point Theme:
#logo {
margin: 0;
}
.site-branding {
padding: 0;
}
.post-info {
display: none;
}
#navigation ul li a {
min-height: 22px;
padding: 5px 10px 5px 10px;
}
.post-date {
display: none;
}
Thanks and Regards.
WPBeginner Support
Hi Eugene,
We are not sure what may be causing this issue. It depends on your theme’s CSS and layout and which classes they have used. You can try this custom CSS:
.primary-navigation li ul { margin:0px; padding:0px; }1-click Use in WordPress
管理者
Eugene
I’m sorry to say, that didn’t work either…
Thanks for trying, it seems there’s a new theme called for.
Regards.
Amirul Farhan
Hello.
Is the plugin works even though with the theme purchased have its own menu design?
Thanks
Rida
if you want to use bootstrap you simply add the css classes of your own with simple one line code on your header.php
‘primary’, ‘container’ => ‘div’, ‘container_class’ => ‘collapse navbar-collapse’, ‘menu_class’ => ‘nav navbar-nav pull-right’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
Dhany
Yeay..another PLUGIN you guys share how to use PLUGIN sooo much, not exactly use wordpress…great job
WPBeginner Support
Hi Dhany,
Thanks for the feedback. At WPBeginner, our target audience is mostly beginner level users. Most of them are not familiar with CSS, HTML, PHP, etc. Plugins make it easier for them to get things done without breaking their websites.
管理者
Andrew
Dude…it says ‘beginner’ in the URL.
Plus…they laid out a manual option halfway through.
Malin
Hi! I desperately need help with my menu on the site using Baskerville theme. With the latest update the menu has gone completely bananas! Please HELP!
Malin
Raymond
This helped me a lot when I was trying to figure out how to get my styles from a bootstrap theme to work in WordPress. Thank you
Samseen
Nice Post here,
However, how can one target a particular item in the list. I actually did a work-around at this time, but I will want to target that particular menu item.
Say for example, I want to have a different background color for the menu of that particular item. How can this be done?
Marko
Inspect element tool in Chrome, Firefox.
benjamin
Hello guys am new in coding, please I need real help here I have a WordPress site and my site theme is Baskerville , this theme support only one menu am trying to create navigational menus to my curious pages, please if there is code for doing that please where can I place it ,please I’ll so much appreciate a reply thank you.
Arsh Dznr
i m ussing my css menu in wordpress but menus dropdown not showing pls help me
thanxxxxxxxx
umanga
did you add your scripts into function.php properly ?
Andika Amri
Hello wpbeginner, nice tuts!
I am using vantage theme, already put custom class in one of my menu = “.menu-about”, but when i’m styling it stylesheet.css, its not applicable at all, do you have any suggestion at all?
thanks!
shaon
I am using twenty Twelve theme. Already made changes to my menu with different colors. But i cant move the navigation menu position on the header, it got too much space at bottom from the baseline of the header . I want it touching the bottom of the header.
Niveditha
Hi,
I have created a main menu in header and a footer menu using the wordpress codex. Now my two menus sit vertically on my page. How to code them for horizontal menus?
Please help out, this is real urgent!
TIA
WPBeginner Support
For that you need to use CSS. Study the code in the default themes, the best example would be twenty thirteen or twenty twelve themes.
管理者
Judy
I would kill for an infographic for what all those classes actually modify. Like:
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
and what the difference is between the dashes/underscores like in .current-menu-parent vs .current_menu_parent
i will make one for you if you explain it to me!
thank you…
Tarmizi Achmad
thx about information…
Yogesh Kumar
hey i want to ask a very important thing
Like the bar shown on your website’s nav bar above for the link Blog shows 8 links as we move our cursor on that …now my site’s are also showing in the same style but i want them to be displayed in such a manner that when i will move my cursor over it will show the 8 links side by side means 4-4……Please sir i am in a great need of this …please reply to this asap…
Editorial Staff
Usually menus are organized in unordered lists ul. When you have sub navigation or dropdowns, then are its own unordered list inside a list element. So an example CSS class that you would be modifying would be like:
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
Now this would set each second level list item to have an exact width and float left.
管理者
Jim
Great article, thanks.
I never new about that CSS class feature, at least I know now.
Its really going to benefit me.
Thanks.
Nilamkumar Patel
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
wiseroner
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
wpbeginner
@wiseroner You cant just add the font-size in the main menu class in your css file.
wpbeginner
@mriulian Look in the tutorial above… the classes for current pages are already defined…
In the header code, you need to define the menu container ID and container class… follow the article as it says, and it will work.
mriulian
Just trying to be more clear, this is my code:
// in the function page
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// in the header page
‘main_nav_menu’)); ?>
// in the css file
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
How do I apply this class to my navigation? ( very easy in a static html page but apparently pretty complicated in wordpress).
Thanks in advance
mriulian
This is what I did but it doesn t work. I registered my menu in the
functions page and then I called it from the header page as my main
navigation. Now, I have a . current class in my stylesheet to be applied
to the current page but it is not obvious how to do that.
Can you help with a suggestion?
wpbeginner
The way WordPress navigation menus work, it will automatically know which page is the current one..
iirimina
Thank you for mentioning about the css classes in the screen options panel. The problem that I have with my navigation is how to style the nav menu so that each menu item gets a specific background color when you arrive at a certain page. You mention creating a class such as .current_page_item{} in your style sheet. But how to apply this class in the header.php?
Rick
Where can I get further more detailed info on how to add the icons to the menu names. Whats a real good css guide for doing alot of these things you outlined here?
Thanks
Editorial Staff
CSS-Tricks is a good forum, but you should probably look at CSS for Beginner books to learn CSS. Because all you are doing is adding a background image.
管理者
Francisco
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Editorial Staff
Yes, you would utilize Menu Class parameter for that.
管理者
Francisco
That’s what I was thinking. Thanks for confirming, and for getting back to me.
Cheers!
Jayesh
nice article.
I want to change out put of wp_nav_menu().
I do not like HTML generated by wp_nav_menu().
I have my own nice HTML for Menu I want.
so I wanted to modify HTML structure generated by wp_nav_menu().
is this possible ?
Kindly advise asap.
Editorial Staff
You can add your own divs etc, but it will always be the list output. You can style it to be however you want.
管理者
chunky
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
Kalid
hi, thank for the tutorial. it would be nice if you guide me to have the nav menu used in your theme. Id like to have a drop-down menu like yours. tnks!
Editorial Staff
The WordPress default navigation menu lets you have drop down menus. Just drag them a little to the right of the main item, and it is possible. If you use a framework like Genesis, it already has Fancy Drop down option available, so you can simply select that. Or you can utilize jQuery techniques like SuperFish to do this. We may add a tutorial in the future.
管理者
tuba
very nice article, helped me for my wordpress project, thanks!
GrimCris
Great article. I didn’t know about the CSS classes in WordPress Menus. Thank you so much!
Keith Davis
You guys know your Wordpress.
This is not an easy tutorial but well explained and certainly adds to my understanding.
Appreciate you educating the rest of us.
Rick
Dude! Awesome! I had no idea about CSS option for menus! Rad-a-tad
Adam W. Warner
Great write up, super informative! I didn’t realize the screen options for menus either.
Eli
I’m not sure in what you should place the first php wp_nav_menu code. Would it be in the functions file or header or…?
Tony
Didn’t know about the CSS Classes menu item! Thanks for pointing that out.
Editorial Staff
You are welcome
管理者
Steve Meisner
Me neither! That was exactly what I needed. God bless you all and the Wordpress dev team!
Pieter
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Editorial Staff
Glad we were able to help Pieter.
管理者