3 Ways To Add A New Widget To Your Themes Nav Menu

This tutorial shows you how to add a new widget area to your primary or secondary nav menu.

Simply change the menu name in the code from primary to secondary if needed.

I’ll provide 3 solutions:

  1. One for Genesis users
  2. One which works in any theme
  3. Add directly to your themes header.php file

Here’s the new widget added to the secondary menu and populated with the Simple Social Icons widget:

nav-menu-widget

The tutorial also includes CSS for horzontal and vertical positioning of your widgets content in your nav menu.

Here’s the code for logged in members:

Related Tutorials

2 responses to “3 Ways To Add A New Widget To Your Themes Nav Menu”

  1. Almost there. Widget registered. I installed the simple social icons in the widget and I’m getting nothing at the moment. But I do appreciate how far you’ve gotten me.

    The issue might be that my primary menu is a custom menu widget placed in the header right position.

    Hopefully I’m not making it too confusing by writing out my thoughts as I ponder on this.

    1. Brad Dalton Avatar
      Brad Dalton

      Feedback always welcome Clay.

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.