Responsive Navigation Vertical Toggle Menu Styles

Customize both the Primary and Secondary Navigation Vertical Toggle Menu styles.

Please Note: The following textareas provide both the default styles for these options as well as example code for a menu button instead of a menu bar.
Primary Vertical Toggle Menu Style Default Code:
.responsive-primary-menu-container { background: #333333; border-bottom: 2px solid #DDDDDD; width: 100%; padding: 12px 0; overflow: hidden; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .responsive-primary-menu-container h3 { padding-left: 15px; color: #AAAAAA; font-size: 16px; font-size: 1.6rem; font-family: \'PT Sans\', sans-serif; font-weight: normal; float: left; } .responsive-primary-menu-container .responsive-menu-icon { padding: 5px 15px 0 0; float: right; } .responsive-primary-menu-container .responsive-icon-bar { display: block; width: 18px; height: 3px; background: #AAAAAA; margin: 1px 0; float: right; clear: both; -webkit-border-radius: 1px; border-radius: 1px; }
	
Secondary Vertical Toggle Menu Style Default Code:
.responsive-secondary-menu-container { background: #F5F5F5; border-bottom: 2px solid #DDDDDD; width: 100%; padding: 12px 0; overflow: hidden; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .responsive-secondary-menu-container h3 { padding-left: 15px; color: #888888; font-size: 16px; font-size: 1.6rem; font-family: \'PT Sans\', sans-serif; font-weight: normal; float: left; } .responsive-secondary-menu-container .responsive-menu-icon { padding: 5px 15px 0 0; float: right; } .responsive-secondary-menu-container .responsive-icon-bar { display: block; width: 18px; height: 3px; background: #888888; margin: 1px 0; float: right; clear: both; -webkit-border-radius: 1px; border-radius: 1px; }
	
Primary/Secondary Vertical Toggle Button Style Code:
.responsive-primary-menu-container, .responsive-secondary-menu-container { display: none; } .mobile-primary-toggle, .mobile-secondary-toggle { width: 70px; margin: 0 auto; padding: 6px 10px; font-size: 12px; line-height: 1.428571429; font-weight: normal; color: #777777; text-align: center; background-color: #E8E8E8; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #F5F5F5, #E8E8E8); background-image: -ms-linear-gradient(top, #F5F5F5, #E8E8E8); background-image: -webkit-linear-gradient(top, #F5F5F5, #E8E8E8); background-image: -o-linear-gradient(top, #F5F5F5, #E8E8E8); background-image: linear-gradient(top, #F5F5F5, #E8E8E8); border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); cursor: pointer; display: none; } .mobile-primary-toggle:hover, .mobile-secondary-toggle:hover { color: #555555; background-color: #EBEBEB; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #F9F9F9, #EBEBEB); background-image: -ms-linear-gradient(top, #F9F9F9, #EBEBEB); background-image: -webkit-linear-gradient(top, #F9F9F9, #EBEBEB); background-image: -o-linear-gradient(top, #F9F9F9, #EBEBEB); background-image: linear-gradient(top, #F9F9F9, #EBEBEB); } .mobile-primary-toggle:active, .mobile-secondary-toggle:active { color: #757575; background-color: #E1E1E1; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #EBEBEB, #E1E1E1); background-image: -ms-linear-gradient(top, #EBEBEB, #E1E1E1); background-image: -webkit-linear-gradient(top, #EBEBEB, #E1E1E1); background-image: -o-linear-gradient(top, #EBEBEB, #E1E1E1); background-image: linear-gradient(top, #EBEBEB, #E1E1E1); box-shadow: inset 0 0 8px 2px #C6C6C6, 0 1px 0 0 #F5F5F5; border: none; }