Worldwide (GoodLayers)

The Worldwide theme uses two menus with the same theme location for its responsive menu system, so they both appear when UberMenu is activated. It also creates residual styling (see also: residual styling troubleshooting guide). To resolve this, we’ll replace the system with UberMenu Direct instead. I will provide a child theme with these changes at the end.

In header.php we replace

// responsive menu
if( $gdl_is_responsive && has_nav_menu('main_menu') ){
    dropdown_menu( array('dropdown_title' => __('-- Main Menu --', 'gdl_front_end'), 'indent_string' => '- ', 'indent_after' => '','container' => 'div', 'container_class' => 'responsive-menu-wrapper', 'theme_location'=>'main_menu') );   
    echo '<div class="clear"></div>';
}
                 
// main menu
echo '<div class="main-navigation-wrapper">';
if( has_nav_menu('main_menu') ){
    echo '<div class="main-superfish-wrapper" id="main-superfish-wrapper" >';
    wp_nav_menu( array('container' => '', 'menu_class'=> 'sf-menu',  'theme_location' => 'main_menu' ) );
    echo '<div class="clear"></div>';
    echo '</div>';

with

echo '<div class="main-navigation-wrapper-uber">';
if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'main_menu' );

This removes the extra wp_nav_menu() call (to remove the duplicate menu) and changes the wrapper class so that the residual styling no longer applies to UberMenu.

Now the issue is that UberMenu will sit above the “Random” button that the theme includes outside of the menu. To resolve this, we’ll position the button absolutely and leave a space for it if we have right-aligned items, as well as adjust the layering to make sure the button stays on top and is clickable.

.main-navigation-wrapper-uber{
    position:relative;
}
div.random-post{
    right:0;
    position:absolute;
    z-index: 40;
}
#megaMenu{
    z-index:30;
}
@media only screen and (min-width: 999px) {
	#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega-floatRight{
		margin-right:60px;
	}
}
@media only screen and (max-width: 999px) {
	div.main-navigation-wrapper-uber .random-post { display: none; }
}

If we want to make the menu a bit taller like the original menu, we can add

#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, 
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator{
	padding-top:18px;
	padding-bottom:18px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 .ubersearch{
	margin-top:6px;
}

We’ll also make sure the top menu overlaps properly

div.top-navigation-wrapper{
	position:relative;
	z-index:25;	
}
div.gdl-navigation-wrapper{
	position:relative;
	z-index:20;
}

(Also, the Flat Skins Pack styles work really well with this theme).

Here’s the result

Child Theme

I have created a child theme which incorporates all of these changes, overriding the header and adding the required styles.

Unfortunately, this theme includes a version number in its theme directory name, so this name will change as you update the theme, making this more difficult than it needs to be. What you’ll need to do is check the style.css file in the child theme and adjust two values to make sure they match the directory of your theme:

/*
...
Template: worldwide-v1-01
...
*/

in the header at the top of the style.css, you’ll see the Template declaration. This must match the directory of the parent theme. So if you are on v1.02, you’d need to change this to

/*
...
Template: worldwide-v1-02
...
*/

Or whatever the value of your worldwide directory path is.

Second, in the @import statement, you’ll need to make the same change

@import url("../worldwide-v1-02/style.css");

Download Worldwide Child Theme