Builder Navigation Module

From iThemes Codex
Jump to: navigation, search
1.1 WordPress built-in Menu Editor

The Navigation Module offers a number of options for adding navigation elements to your Layout. To get the most power out of this feature, use WordPress' built-in Menu Editor to create your menus. You can then select to use one of these menus in the Navigation Module Settings. (Figure 1.1)

Adding the Navigation Module

To add a Navigation Module to your Layout, click Add Module and select the Header Module from the list of available Modules.


Navigation Module Settings

Once the Navigation Module has been selected and added to the Layout, the Modify Navigation Module Settings box will appear. Customize the settings of the Navigation Module by selecting from the following options.


Available Navigation Module settings include:

  • Name - To help identify widget locations
  • Navigation Type - A populated list of your WordPress Menus or Legacy Menu Types, such as Builder Settings categories, pages or WordPress pages
  • Style - **Varies by child theme** - If the active child theme (theme design) provides Alternate Module Style options for this module, select the desired style.

Click the Save button to save the Navigation Module Settings. You'll now see the Navigation Module added to your Layout, denoting the type of navigation used by the Module.


Advanced Notes

The Legacy Menu Types are present as a fallback in case you have not configured any menus in the Menu Editor. The Builder menu types can be configured in the Builder's Theme Settings. The WordPress Pages option uses WordPress' built-in wp_list_pages function to show a listing of all of your site's pages.

Add support for Sidebars in Navigation Module

It is possible to add sidebar(s) in a Navigation Module by adding the following in child theme's functions.php:

add_theme_support( 'builder-navigation-module-sidebars' );

Note: This is presently an experimental feature, see the release notes for more details:

As such the graphic representing the Navigation Module in layout manager will not change to reflect the presence and arrangement of sidebar(s).

Below is an example of using this to add social media icons floating to the right in the nav bar with BuilderChild-Default as the active theme.

But first the result:

WordPress Dev Site 2013-05-30 13-08-04.png

In the backend:

2013-05-30 12-55-18.png
2013-05-30 12-57-43.png
WordPress Dev Site 2013-05-30 13-13-19.png

With Social Media Widget plugin installed and activated, its widget has been placed in the Navigation Module's sidebar.

2013-05-30 13-02-45.png

and this CSS added at end of child theme's style.css:

.builder-module-navigation .builder-module-sidebar {
	background: transparent;
	padding-top: 0;
	padding-bottom: 0;

.builder-module-navigation .widget {
	padding: 0;
	padding-right: 0.5em;

.builder-module-navigation .widget a {
	display: inline;

.socialmedia-buttons img {
	padding-top: 0.5em;

Generic CSS Class


See also

← Back to Builder Codex Home