Login

Mingle / Salutation

Support CenterSubmit a Ticket

Mingle / Salutation

Instructions for Mingle 1.7+

Parallelus has updated Mingle to integrate with UberMenu more smoothly now – awesome!

Now we just have to change one thing in design-header.php, lines 49-54 you’ll find this code:

<?php if ($theHeader['menu_left']) { ?>
	<div id="MM" class="slideMenu">
		<?php wp_nav_menu( array( 'container' => false, 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>
		<div style="clear:left"></div>
	</div>
<?php } ?>

Replace the content within the if statement with just

<?php wp_nav_menu( array( 'container' => 'div', 'container_id' => 'MM', 'container_class' => 'slideMenu', 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>

so that your end result is

<?php if ($theHeader['menu_left']) { ?>
	<?php wp_nav_menu( array( 'container' => 'div', 'container_id' => 'MM', 'container_class' => 'slideMenu', 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>
<?php } ?>

Now you should be able to switch back and forth between the default menu and UberMenu without issue.

If you wish to share the menu space between UberMenu and a right-aligned menu, you will want to disable the Expand Menu Bar Full Width option in UberMenu’s Basic Configuration.

You may also wish to reduce the height of UberMenu and remove its background so that it better fits within the Mingle menu bar.

#megaMenu.megaMenuHorizontal{
  background:transparent;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, 
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:9px;
  padding-bottom:8px;	
  border:none;
}

Keep in mind that Mingle uses two menus, while UberMenu can only be used once per page. If you’d like to use UberMenu styles for “both” menus, I would recommend removing the second menu, using a single UberMenu, setting it to 100% width, and position some of the menu items to the right via CSS (the customization details are beyond the scope of this help file).

Old Instructions

Parallelus informs me that the same general solution works for Salutation as well, though it only has a single menu. Note that the line numbers below may differ somewhat.

Mingle and Salutation are awesome themes, but integrating them with UberMenu is a little tricky. Here are some guidelines for the changes you’ll need to make:

1. First, Mingle/Salutation’s menu javascript throws an error if the default menu doesn’t exist. To solve this problem, we need to comment out the call to ddsmoothmenu() for the left menu in the theme’s footer.php around line 51

//if ($theHeader['menu_left']) { echo 'ddsmoothmenu.init({ mainmenuid: "MM", orientation: "h", classname: "slideMenu", contentsource: "markup" });'; }

2. To remove the theme’s styling from the menu, you’ll need to change the class name of the left/primary menu (.slideMenu) around line 50 of design-header.php

//From:
<?php if ($theHeader['menu_left']) { ?>
    <div id="MM" class="slideMenu">
 
//To:
<?php if ($theHeader['menu_left']) { ?>
    <div id="MM" class="uberslideMenu">

3. Now things are working as they should, you’ll just need to restyle a bit (see Customizing UberMenuMenu). You’ll likely want to reduce the padding on the top level menu items to make it fit, and maybe make the background of the menu bar transparent. Here is some code to get you started:

#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a {
  padding:7px 10px;
}
#megaMenu,
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a{
  background:none;
  border:none;
  box-shadow:none;
}

Remember, the width of the submenus is limited to the width of the top level nav bar, so if you want to increase it you can adjust the size like this:

#megaMenu{
  width:500px;
}

4. Keep in mind that Mingle uses two menus, while UberMenu can only be used once per page. If you’d like to use UberMenu styles for “both” menus, I would recommend removing the second menu, using a single UberMenu, setting it to 100% width, and position some of the menu items to the right via CSS (the customization details are beyond the scope of this help file).

On this page