Snippets for Altitude Pro example tutorial

functions-01.php

<?php

// Do NOT include the opening tag!

add_filter( 'supersideme_modify_display_css', 'altitude_full_width_supersideme' );
function altitude_full_width_supersideme( $display_css ) {
	$display_css = '
		nav, #nav, .nav-primary, .nav-secondary, .site-header .secondary-toggle { display: none; }
		.slide-nav-link { display: block; }';
	return $display_css;
}

functions-02.php

<?php

// Do not include opening tag!

add_filter( 'supersideme_navigation_options', 'altitude_modify_supersideme_options', 10, 2 );
function altitude_modify_supersideme_options( $side_tweaks ) {
	$side_tweaks['position']     = 'absolute'; // lock the button postion within its parent element
	$side_tweaks['width']        = 'auto'; // instead of 100% width
	$side_tweaks['displace']     = false; // the side panel will slide over the site instead of pushing it
	$side_tweaks['location']     = '.site-header .wrap'; // the menu button will hook into the .site-header div instead of being added to the body (default)
	$side_tweaks['closeevent']   = '.menu-close, a[itemprop="url"]:not(.sub-menu-toggle)'; // change what causes the SuperSide Me panel to close (useful mostly if you have on page anchor links in your menu)
	$side_tweaks['button_color'] = 'transparent'; // optional, so it has no color
	$side_tweaks['background']   = 'rgba(0,0,0,.8)'; // optional, to give the menu panel some transparency

	return $side_tweaks;
}

functions-03.php

<?php

// Do not include opening tag!

add_action( 'after_setup_theme', 'altitude_conditionally_add_menus' );
function altitude_conditionally_add_menus() {
	if ( function_exists( 'supersideme_has_content' ) && supersideme_has_content() ) {
		return;
	}
	add_action( 'genesis_header', 'genesis_do_nav', 12 );
	add_action( 'genesis_header', 'genesis_do_subnav', 5 );
	add_action( 'genesis_footer', 'rainmaker_footer_menu', 7 );
}

style.css

/* Altitude Pro Full Width SuperSide Me Tweaks
--------------------------------------------------------- */

.site-header .wrap {
	position: relative;
}

.site-header.dark .slide-nav-link {
	margin: 0;
}

.slide-nav-link {
	margin: 12px 0;
}

.menu-close:hover {
	border: none;
}


@media only screen and (max-width: 1023px) {
	.slide-nav-link {
		margin: 2px 0;
	}
}