cjkoepke

<!--
DO NOT COPY THIS
The button code for the Home Top Text widget in Church Pro.
-->

<!-- COPY ONLY THE LINE BELOW -->
<a href="#" class="btn btn-white">Learn More About Us</a>

cjkoepke

<!--
DO NOT COPY
Replace ONLY the strings in all caps.
-->

<div class="one-half first">
	<img src="URL-OF-YOUR-MAP-IMAGE">
</div>
<div class="one-half">
	<h4 class="widget-title">Times & Locations</h4>

cjkoepke

<?php
//* Do NOT include the opening PHP tag

/** 
  * Reposition the Primary navigation at the top of the DOM.
  * @author Calvin Koepke
  * @link http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav', 1 );

cjkoepke

<?php
//* Do NOT include the opening PHP tag

/**
  * Add the menu to the .site-header, but hooking right before the genesis_header_markup_close action.
  * @author Calvin Koepke (@cjkoepke)
  * @link http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/
add_action( 'genesis_header', 'ck_menu_button', 14 );
function ck_menu_button() {

cjkoepke

<?php
//* Do NOT include the opening PHP tag

/** 
  * Add the overlay div that will be used for clicking out of the active menu.
  * @author Calvin Koepke (@cjkoepke)
  * @link http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/
add_action( 'genesis_before', 'ck_site_overlay', 2 );
function ck_site_overlay() {

cjkoepke

/*
	Title: How to Add a Mobile-Friendly, Off Canvas Menu in Genesis
	Author: Calvin Koepke (@cjkoepke)
	Link: http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/

/* Genesis Navigation Menu
--------------------------------------------- */

.genesis-nav-menu {

cjkoepke

jQuery( document ).ready( function( $ ) {

	// @author Calvin Koepke (@cjkoepke)
	// @link http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis/
	// @version 1.1
  // @license Free to use as you wish. Please share if you appreciate and link to the post above.

  // Store our jQuery objects as variables
	var body         = $( 'body' ),
	toggleButtons    = $( '.menu-btn, .close-btn, .site-overlay' );

cjkoepke

<?php
//* Do NOT include the opening PHP tag

/** 
  * Include the JavaScript
  * @author Calvin Koepke (@cjkoepke)
  * @link http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/
add_action( 'wp_enqueue_scripts', 'ck_load_menu' );
function ck_load_menu() {

cjkoepke

/*
	Title: How to Add a Mobile-Friendly, Off Canvas Menu in Genesis
	Author: Calvin Koepke (@cjkoepke)
	Link: http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/

/* Animation Settings and Classes
--------------------------------------------- */

.off-canvas-active,

cjkoepke

<?php
//* Do NOT copy this line or above

add_filter( 'body_class', 'ck_custom_body_class' );
function ck_custom_body_class( $classes ) {
	
	$classes[] = 'custom-class';
	
	return $classes;