Categories
Code Snippets jQuery WordPress

Mobile Friendly Menu

In this tutorial I explain how to create a mobile friendly menu for the iThemes Builder theme. By default the menu will wrap on smaller screens. When the menu wraps it is not very mobile friendly.

The menu wraps on small screens.
The menu wraps on screens.

In your child theme directory create a new file for some jQuery. You can call it what you want but I am going to call it mobile_script.js. The code in this file should not run until the page loads. The script needs to be enqueued in the functions.php file.

Add Mobile Menu Functionality
After the page loads add a class to the menu and to the navigation module. The Menu label is added before the module navigation. If you click on ≡ Menu the menu items are shown or hidden. The sub-menu items are hidden until the parent item is tapped.

jQuery(document).ready(function() {

	jQuery(".builder-module-navigation .menu").addClass("mobile-menu-hidden");
	jQuery(".builder-module-navigation").addClass("mobile");
	
	jQuery(".mobile-menu-hidden").before('<div class="mobile-menu">≡ Menu</div>');
	
	jQuery(".mobile-menu").click(function(){
		jQuery(this).next().slideToggle();
	});


	jQuery(".mobile.builder-module-navigation li:has(ul)").click(function(){
		jQuery(".mobile.builder-module-navigation li ul").hide('fast');
		jQuery("ul",this).toggle();
	});

});

Style The Mobile Menu
After you add the jQuery file ≡ Menu will show above the navigation on a desktop. So in the style.css file it is hidden or told not to display.

.mobile-menu{
display: none;
}

Then the mobile navigation style is added to the main style sheet, responsive style sheet, or mobile style sheet that is available with most Builder child themes.


@media screen and (max-width:767px) { 
/*********************************************
	Mobile Menu
*********************************************/
.mobile-menu {
  color: #4b9eec;
  width: auto;
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
  display: block;
  padding: .65em 0;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  transition: all .2s ease-in;
  text-align: center;
}

.mobile.builder-module-navigation .mobile-menu-hidden {
	display: none;
	margin-bottom: 1em;
}

.mobile .builder-module-navigation-menu-wrapper {
	display: block;
}
.builder-module-navigation-background-wrapper {
	padding: 0;
}
.builder-module-outer-wrapper .mobile.builder-module-navigation {
	padding: 0;
}
.mobile.builder-module-navigation {
	display: block;
	line-height: 1;
	width: 100%;
}
.mobile.builder-module-navigation ul.menu {
	border-bottom: 0;
}
.mobile.builder-module-navigation ul.menu:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.mobile.builder-module-navigation ul {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.mobile.builder-module-navigation ul * {
	margin: 0;
}
.mobile.builder-module-navigation li {
	padding: 0;
	display: block;
	width: 100%;
	background-color: rgba(255, 255, 255,.8);
}

.mobile.builder-module-navigation li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
	color: #333333;
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	padding: .5em 1em;
	border: 0;
	border-bottom: 1px solid #C9C9C9;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
.mobile.builder-module-navigation .current_page_item > a,
.mobile.builder-module-navigation .current-cat > a,
.mobile.builder-module-navigation .current-menu-item > a {
	color: #252525;
	background: #F5F5F5;
}
.mobile.builder-module-navigation li a:hover,
.mobile.builder-module-navigation .current_page_item li a:hover,
.mobile.builder-module-navigation .current-cat li a li a:hover,
.mobile.builder-module-navigation .current-menu-item li a:hover {
	color: #252525;
	background: #F5F5F5;
}
/* Second Level */
.mobile.builder-module-navigation li ul {
	background: #FFFFFF;
	border: 0;
	width: 100%;
	left: 0;
	position: relative;
	display: none; 
}

.mobile.builder-module-navigation li li {
	border: 0;
	width: 100%;
}
.mobile.builder-module-navigation li li a,
.mobile.builder-module-navigation .current_page_item li a,
.mobile.builder-module-navigation .current-cat li a,
.mobile.builder-module-navigation .current-menu-item li a {
	float: none;
	font-size: 1em;
	line-height: 1;
	margin: 0;
	padding-left: 2em;
}
.mobile.builder-module-navigation li li a:hover,
.mobile.builder-module-navigation li li a.sfhover {

}
.mobile.builder-module-navigation li ul ul {
	margin: 0;
}
.mobile.builder-module-navigation li:hover ul,
.mobile.builder-module-navigation li li:hover ul,
.mobile.builder-module-navigation li li li:hover ul,
.mobile.builder-module-navigation li li li li:hover ul,
.mobile.builder-module-navigation li li li li li:hover ul,
.mobile.builder-module-navigation li.sfhover ul,
.mobile.builder-module-navigation li li.sfhover ul,
.mobile.builder-module-navigation li li li.sfhover ul,
.mobile.builder-module-navigation li li li li.sfhover ul,
.mobile.builder-module-navigation li li li li li.sfhover ul {
	left: 0;
}

.builder-module-navigation .builder-module-sidebar-outer-wrapper {
  display: none;
}
}

Final Result

Example Mobile Friendly Menu

Categories
WordPress

Display A Gravity Form In A Light Box

Recently on Skype, Christine was asking how to display a Gravity form in a light box using the iThemes Builder theme. After trying multiple techniques found online she was not able to get it to work successfully. My first thought was to use the version of Thickbox that is included with WordPress. That would have worked but it would have required adding two lines of code to the functions dot php file and Thickbox is not responsive.

I am going to show you how to use the Royal PrettyPhoto plugin to display a Gravity form in a light box using the iThemes Builder theme.

Layout

Once the form has been created create a layout in iThemes Builder that only has a content area.

Gravity Form on Page

gravityform
Then create a page that includes only the title and the gravity form shortcode. Later I will call this the form page.

Light Box Plugin

Install and activate the Royal PrettyPhoto plugin. Then go to Settings > Royal PrettyPhoto.

Royal Prettyphoto
Change the settings to hide the photo title, hide the Photo Control, Hide the social icons, Hide the Photo Thumbnail, and Hide the Photo Nav Arrow. Be sure to save the changes.

Gravity Form In A Light Box

Now it is time to edit the page the link will be on. Add a link to the form page. For Example:

< a href="http://mydomain.com/form/">Contact Us</a> 

Then add the following query string to the end of the page url

?iframe=true&width=600&height=700

Your link should look similar to

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700">Contact Us</a> 

Let me explain so you can make changes as needed. The first query variable iframe tells it to display the page it is linking to in an iframe. The width is the width of the iframe. The example shows the width in pixels, but you can also set the width to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. The height is the height of the iframe. The example shows the height in pixels, but you can also set the height to a percentage such as 100{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a}. If the page is bigger than the size provided scroll bars will appear.

If you were to save the page and view it in the browser the form would not display in a lightbox when the link is clicked. It would actually go to the form page. So we need to do another step.

< a href="http://mydomain.com/form/?iframe=true&width=600&height=700" rel="prettyPhoto[iframes]">Contact Us</a> 

Add the rel attribute to the link. Save the page and view it in the browser. When you click the link the form is now loaded in the lightbox.
form in lightbox
You can also style the Thickbox as needed.

Note: If you are using a theme other than iThemes Builder you will need to create a plan page template that does not have styling. I also want to mention that displaying a Gravity form in a light box is not the best solution for mobile visitors.

Do you have a solution for displaying a Gravity Form in a light box? If so share it in the comments below.
Categories
WordPress

How To Remove The Entry Title In iThemes Builder Using A Custom Extension

There are two things that I really like about iThemes Builder — the layout engine and the extensions.

Extensions are like mini-themes for Builder in that they can have style.css and functions.php files. They can be applied to a specific Layout or to a specific View.- iThemes Codex

In a recent project I needed one layout to not show the entry-title. Since there is not a filter to alter the entry-title I considered my options and decided to just create an extension. To create the extension I added an extensions folder to my child theme. In the extensions folder I created another folder called no-title. In the no-title folder I created a file called functions.php. In the functions.php file I added the following code:

 

<?php
if ( is_admin() )
	return;

if ( ! class_exists( 'ExtensionNoTitleLayout' ) ) {
	class ExtensionNoTitleLayout {
		function ExtensionNoTitleLayout() {
			it_classes_load( 'it-file-utility.php' );
			$this->_base_url = ITFileUtility::get_url_from_file( dirname( __FILE__ ) );
			add_action( 'builder_layout_engine_render', array( &$this, 'change_render_content' ), 0 );	
		}
		function extension_render_content() {	
		?>
			<?php if ( have_posts() ) : ?>
				<div class="loop">
					<div class="loop-content">
						<?php while ( have_posts() ) : // The Loop ?>
							<?php the_post(); ?>
							<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
								<div class="entry-content clearfix">
									<?php the_content(); ?>
								</div>
							</div>								
						<?php endwhile;  ?>
					</div>
				</div>
			<?php else :  ?>
				<?php do_action( 'builder_template_show_not_found' ); ?>
			<?php endif;  ?>
		<?php

		}
		function change_render_content() {
			remove_action( 'builder_layout_engine_render_content', 'render_content' );
			add_action( 'builder_layout_engine_render_content', array( &$this, 'extension_render_content' ) );
		}
	} 

	$ExtensionNoTitleLayout = new ExtensionNoTitleLayout();
}

ExtensionOnce I created the extension I moved to the layout editor and selected the extension.