On Feb 4, 2014, a mobile navigation plugin was released for Beta testing. It should make all the manual changes unnecessary. You can find more on this in this forum: http://ithemes.com/forum/forum/236-builder-mobile-navigation-plugin-beta-feedback/

+

+

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.

+

+

+

+

+

==Manual implementation==

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.

+

===Pre-requisites===

===Pre-requisites===

Line 663:

Line 673:

</pre>

</pre>

−

===Enable the Mobile Nav as an Alternative Navigation Module Style===

+

===Enable the Mobile Nav as an Alternative Module Style===

Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)

Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>)

+

+

'''NOTE: when using a navigation menu in another module (e.g. an HTML module, see [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_add_a_Navigation_menu_in_a_Builder_module below])'''

'''When using a navigation menu in another module (e.g. an HTML module)'''

+

'''NOTE:'''

+

To avoid conflicts, the above function <code>it_builder_loaded()</code>will '''only''' run if a function with the same name '''does not already exist'''. Some themes are already using this function to load custom styles. In that case, '''you should not add this function''', but instead '''add the code''' <code>builder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' );</code> to the existing function!

−

Replace:

+

===Add the css code for the Mobile navigation===

+

Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>:

−

<pre class="brush:php; gutter: false;">

+

'''Note: when using a navigation menu in another module (e.g. an HTML module)'''

How to add social media icons in nav bar

This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.

Method 1

1. Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.

2. Instead of a navigation module, use a PHP enabled HTML module having this sample code:

How to use CSS3 PIE

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

It is used to get CSS3 properties like border-radius working in IE older than version 9.

Follow the steps below to make CSS3 PIE work in Builder:

Update on July 11, 2012: Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. This forum topic provides an example where post comment text area (which already has border-radius set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.

2. Extract the zip flle and upload PIE.htc to any web reachable directory.

Ex.:

public_html/assets/PIE.htc

3. Add position: relative; style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).

Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.

where builder-module-514372ec66190 is the ID of widget bar module having the widget.

How to Enable Comments For Custom Post Types

1. Ensure that support for Comments is enabled in the CPT.

How this is done depends on the method being used to set up the CPTs.

Here's an example when using CustomPress:

2. Go to My Theme -> Settings -> Comments.

Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.

3. In the CPT add/edit screen, tick Allow comments in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick Discussion.

So we encourage you to take the plugin for a test drive first, and provide feedback through that forum.

Manual implementation

There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.

Pre-requisites

Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.

Responsive needs to be enabled in the child theme (functions.php should contain: add_theme_support( 'builder-responsive' );

Include the javascript code that enables the Mobile dropdown

Copy the js folder and contents from the Air child theme to your child theme.

Add the following code at the end of your child theme's functions.php file, yet before the closing ?> (if any):

NOTE:
To avoid conflicts, the above function it_builder_loaded()will only run if a function with the same name does not already exist. Some themes are already using this function to load custom styles. In that case, you should not add this function, but instead add the codebuilder_register_module_style( 'html', 'Mobile Navigation', 'mobile-nav' ); to the existing function!

Add the css code for the Mobile navigation

Add the following code at the end of your child themes mobile stylesheet style-mobile.css:

Note: when using a navigation menu in another module (e.g. an HTML module)