Directory (AIT)

The Directory theme by AIT causes significant residual styling which interferes with the menu, and therefore requires Manual Integration

Integration

The code that needs to be replaced is in the directory/Templates/snippets/branding-header.php file.

		<nav id="access" role="navigation">

			{if !is_admin()}
				<h3 class="assistive-text">{__ 'Main menu'}</h3>
				{menu 'theme_location' => 'primary-menu', 'fallback_cb' => 'default_menu', 'container' => 'nav', 'container_class' => 'mainmenu', 'menu_class' => 'menu' }
			{else}
				
				<!-- EASY ADMIN MENU -->
				{var $screen = get_current_screen()}
				{var $subscriber = in_array('subscriber', $GLOBALS['current_user']->roles)}

				{if !$subscriber}
					<a href="{!admin_url('edit.php?post_type=ait-dir-item')}" class="items button{if (($screen->base == 'edit' && $screen->post_type == 'ait-dir-item') || ($screen->base == 'post' && $screen->post_type == 'ait-dir-item'))} button-primary{/if}">
						{__ 'My Items'}
					</a>
					{if isset($themeOptions->rating->enableRating) and !isset($themeOptions->rating->disallowDirectoryUsers) }
					<a href="{!admin_url('edit.php?post_type=ait-rating')}" class="ratings button{if ($screen->base == 'edit' && $screen->post_type == 'ait-rating')} button-primary{/if}">
						{__ 'Ratings'}
					</a>
					{/if}
				{/if}
				<a href="{!admin_url('profile.php')}" class="account button{if ($screen->base == 'profile')} button-primary{/if}">
					{__ 'Account'}
				</a>
				<a href="{home_url()}" class="view-site button">
					{__ 'View site'}
				</a>

				{if is_user_logged_in()}
				<a href="{!wp_logout_url(home_url())}" class="menu-login menu-logout">{__ "Logout"}</a>
				{/if}

			{/if}

		</nav><!-- #accs -->

The residual styling is rooted in the #access ID, so we’ll replace that with the manual integration code conditionally:

		<?php if( function_exists( 'ubermenu' ) ): ?>
			<?php ubermenu( 'main' , array( 'theme_location' => 'primary-menu' ) ); ?>
		<?php else: ?>
		<nav id="access" role="navigation">

			{if !is_admin()}
				<h3 class="assistive-text">{__ 'Main menu'}</h3>
				{menu 'theme_location' => 'primary-menu', 'fallback_cb' => 'default_menu', 'container' => 'nav', 'container_class' => 'mainmenu', 'menu_class' => 'menu' }
			{else}
				
				<!-- EASY ADMIN MENU -->
				{var $screen = get_current_screen()}
				{var $subscriber = in_array('subscriber', $GLOBALS['current_user']->roles)}

				{if !$subscriber}
					<a href="{!admin_url('edit.php?post_type=ait-dir-item')}" class="items button{if (($screen->base == 'edit' && $screen->post_type == 'ait-dir-item') || ($screen->base == 'post' && $screen->post_type == 'ait-dir-item'))} button-primary{/if}">
						{__ 'My Items'}
					</a>
					{if isset($themeOptions->rating->enableRating) and !isset($themeOptions->rating->disallowDirectoryUsers) }
					<a href="{!admin_url('edit.php?post_type=ait-rating')}" class="ratings button{if ($screen->base == 'edit' && $screen->post_type == 'ait-rating')} button-primary{/if}">
						{__ 'Ratings'}
					</a>
					{/if}
				{/if}
				<a href="{!admin_url('profile.php')}" class="account button{if ($screen->base == 'profile')} button-primary{/if}">
					{__ 'Account'}
				</a>
				<a href="{home_url()}" class="view-site button">
					{__ 'View site'}
				</a>

				{if is_user_logged_in()}
				<a href="{!wp_logout_url(home_url())}" class="menu-login menu-logout">{__ "Logout"}</a>
				{/if}

			{/if}

		</nav><!-- #accs -->
		<?php endif; ?>

Note: you’ll want to make this change in a child theme in order to preserve the changes for next time you update the theme

Now UberMenu can function without interference from the theme.

Custom CSS for Positioning

Now that UberMenu can function unimpeded, we’ll add some Custom CSS in the Desktop CSS Tweaks in order to position the menu the same way the original menu was positioned (aligned with the edge of the slider)

.ubermenu.ubermenu-main{
	margin-top:40px;
	margin-right:20px;
}

If you are using a style with thick borders on the bottom of the header, we’ll also add this modification to the header, which prevents other elements from overlapping the border image and the background image from repeating:

#branding{
	padding-bottom:15px;
	background-position:bottom left;
	background-repeat:repeat-x;
}

Recommended Settings

These settings are not required, but they are recommended if you want to make your menu display similarly to the original theme menu.

Control Panel

Menu Bar Alignment – Right

Bound Submenu To – Unbounded

Customizer

Skin – Vanilla

Top Level Text Transform – Uppercase

Top Level Font Size – 15px

Top Level Font Color – #444

Top Level Font Color [Current] – #E20202

Top Level Font Color [Activated] – #E20202

UberMenu 3