Password Reset

Please enter your e-mail address. You will receive a new password via e-mail.

Adding A Search Box To The Nav Bar

If you want to add a search box to your horizontal nav bar you need to use the Custom menu (wp_nav_menu) feature in WP.

If you don’t already have one it’s easy to create a custom menu. Click on the Menus link under the Appearance tab.

If you haven’t created a custom menu now is the time to do so.

Enter a name for your menu and then hit the Create Menu button.

Now you can add pages or categories from the list on the left side and then drag them into the position you want them to appear in on the menu.

Once you have your menu the way you want it, save it and then go to the Theme Locations box in the upper left corner and select your new menu.

Now that that is done you can move on to enabling the search box. This is located in the Advanced Options of the Appearance tab.

Then navigate to the Miscellaneous > Nav Bar Search tab…

  1. Enable the Search bar
  2. Enter the width that you want the navigation portion to be. You can use percent or pixels but you need to enter a number and either the ‘&’ sign or ‘px’ after the number.
  3. Do the same thing for the width o f the search box. The total width also includes the padding (left & right) that you add in the next step.
  4. Enter the padding around the search box. This is needed to position it properly with in your navigation bar.

Remember, the combined width of #2 and #3 (including the right & left padding) cannot exceed the total width of the art-nav DIV. Not even by 1px or the entire nav bar will wrap to a second line.

But how do I find the width of my navigation bar?

There’s two ways to find the width of your navigation bar.

1. Use Firefox with the Firebug add-on (my favorite)

Start Firebug and then click on the navigation bar and then highlight the art-nav DIV . You should then see associated CSS. Now you have the default total width.

2. Open the style.css file in a text editor and find the art-nav class to get the width.

That’s all you need to do and you should now have a search box in your navigation bar.