The Fox (Tranmautritam Team)

The menu styling for The Fox theme is extremely generic – it’s not coded modularly, so its styles affect UberMenu and interfere with its functionality. Due to how generic and non-modular the styles are, there will actually be 3 separate steps necessary to stop the theme from interfering.

1. Changing the Container Tag

First, the theme has styles like this:

Because this selector is so overly generic, it applies to all nav / ul / li tags in the header – in other words, all menus. To prevent these styles from applying to UberMenu, we’ll change the Container Tag setting to div rather than nav

Though this won’t have an effect just yet – see step 2.

2. Manual Integration

The theme also wraps the menu in an extra nav tag, so even after changing UberMenu’s tag, those styles will still apply.

The theme also has another set of styles based on the nav_type class on that wrapper.

To overcome this, we’ll use manual integration.

1. Copy the header.php ( /wp-content/themes/thefox/header.php ) into the child theme ( /wp-content/themes/thefox_child_theme/header.php

The Fox includes a child theme that you just need to install and activate – see The Fox Child Theme

If you install the child theme and WordPress says it can’t find the parent theme, make sure the ‘template’ in the child theme style.css matches the name of your parent theme’s folder exactly, including capitalization.

2. Open the child theme’s header.php and find the menu code

It’ll look like this, around line 236

3. Replace the theme’s menu code with UberMenu

Use the UberMenu manual integration code to replace the theme’s menu with UberMenu:

      if( function_exists( 'ubermenu' ) ){
        ubermenu( 'main' , array( 'theme_location' => 'main-menu' ) ); 
      }
      else{
		    echo '<nav class="'.$nav_type.'">';
		
  			wp_nav_menu( array(

  		    'theme_location' => 'main-menu',

  			'container' => '', 

              'before' => '',
  			
  			'fallback_cb' => 'please_set_menu',
  			
  			'walker' => new rd_megamenu_walker
                      
  			)
			 ); 
       ?>
      </nav>
      <!-- menu END-->
      <?php } ?>

Note: this has not yet eliminated all residual styling. See step 3.

3. Removing the extra nav_type class

In most cases, this would have already resolved the residual styling issue. However, this theme adds its nav_type class twice – once in the nav tag parent of the menu (which we eliminated in step 2), and once on the header tag.

This redundancy, and the fact that styles based on this class are so generic, mean we need to remove both instances of the nav_type class.

So in the child theme’s header.php again, find the header tag around line 161

We want to remove anything that echoes the nav_type. For most users, this is:

echo 'header_shadow '.$nav_type.'';

So we’ll replace that with

echo 'header_shadow '.(function_exists('ubermenu') ? '' : $nav_type) .'';

4. Cleaning Up

So at this point, we’ve eliminated the interfering CSS from the theme.

The following are common settings and CSS changes you may want to make:

Menu Bar Alignment

If you want the menu aligned to the right, change the Menu Bar Alignment to the right.

Submenu Width

If you want the submenu to be wider than the menu bar, change the Bound Submenu To setting to “Unbounded”

Margin Top

To push the menu down a bit, you may want to set the Margin Top to something between 25 and 30px. This will depend partially on your logo size.

Search bar

To style the search bar, you may want to add

header #searchtop {
	float: right;
	padding: 48px 0px 29px 23px;
	font-size: 16px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

Or, just remove it (hide with CSS or remove from header.php) and add a search bar via UberMenu instead.