Code for a tutorial walking through some use-case scenarios of the Dynamik Responsive Vertical Toggle Menu Shortcode feature (Part 2).

dynamik-vertical-toggle-shortcodes-tutorial-part-2

Custom Hookbox:

Name - Custom Toggle Icon

Setup as "Shortcode"

Code:

<div class="responsive-menu-icon">
	<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
	<i class="fa fa-ellipsis-v" aria-hidden="true" style="display:none;"></i>
	<h3 class="mobile-primary-toggle">Menu</h3>
</div>

Custom Widget Areas:

Setup both as "Shortcode"

Name - Responsive Social Icons

Name - Responsive Search Form

JS:

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

	$('.responsive-menu-icon').click(function() {
		$(this).children('.fa').toggle();	
	});

});

Responsive CSS:

Primary Menu:

.responsive-primary-menu-container .responsive-menu-icon .fa {
	color: #aaa;
}
.simple-social-icons {
	margin-left: 10px;
	float: left;
}
.override .simple-social-icons ul li {
	margin: 0 6px 0px !important;
}
#responsive_search_form {
	background: transparent;
	margin-left: 10px;
	float: left;
}
#responsive_search_form .search-form input[type="search"] {
	width: 120px;
	margin-top: 0;
	padding: 5px 8px;
	font-size: 12px;
	font-size: 1.2rem;
}
#responsive_search_form .search-form input[type="submit"] {
	padding: 4px 8px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 17px;
}

Secondary Menu:

.responsive-secondary-menu-container .responsive-menu-icon .fa {
	color: #888;
}