Oblivion (SkyWarrior)

Oblivion by SkyWarrior introduces major residual styling (see also: residual styling troubleshooting guide) and residual scripting from the theme, which breaks UberMenu.

1. Remove Residual Styling

To remove the residual styling, we need to edit `header.php`. You’ll find the NAVBAR section

    <!-- NAVBAR
    ================================================== -->
         <div class="navbar navbar-inverse <?php if ( of_get_option('fullwidth') ) {  }else{ ?>container<?php } ?>">
          <div class="navbar-inner<?php if ( of_get_option('fullwidth') ) { ?> container<?php } ?>">
          	<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
            <div class="nav-collapse collapse">
                <?php wp_nav_menu( array( 'theme_location'  => 'header-menu', 'depth' => 0,'sort_column' => 'menu_order', 'items_wrap' => '<ul  class="nav">%3$s</ul>' ) ); ?>

				<!-- If woocommerce -->
				<?php if ($woocommerce) { if(is_woocommerce()){ ?>
					<div class="cart-outer">
						<div class="cart-menu-wrap">
							<div class="cart-menu">
								<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><div class="cart-icon-wrap"><i class="icon-shopping-cart"></i> <div class="cart-wrap"><span><?php echo $woocommerce->cart->cart_contents_count; ?> </span></div> </div></a>
							</div>
						</div>

						<div class="cart-notification">
							<span class="item-name"></span> <?php echo __('was successfully added to your cart.'); ?>
						</div>

						<?php
							// Check for WooCommerce 2.0 and display the cart widget
							if ( version_compare( WOOCOMMERCE_VERSION, "2.0.0" ) >= 0 ) {
								the_widget( 'WC_Widget_Cart', 'title= ' );
							} else {
								the_widget( 'WooCommerce_Widget_Cart', 'title= ' );
							}
						?>
					</div>
				 <?php }} ?>
				 <!-- Endif woocommerce -->

                 <?php if (of_get_option('login_menu')){ ?>
                 <a href="#myModalL" role="button" data-toggle="modal" class="account"><img src="<?php echo get_template_directory_uri(); ?>/img/account.png"></a>
				<?php } ?>

                 <form method="get" id="header-searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <input type="text" autocomplete="off" value="" name="s" id="header-s">
                        <input type="submit" id="header-searchsubmit" value="Search">
                        <input type="hidden" name="post_type[]" value="portfolio" />
                        <input type="hidden" name="post_type[]" value="post" />
                        <input type="hidden" name="post_type[]" value="page" />
                </form>


            </div><!--/.nav-collapse -->
          </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->

We need to remove all of that and just use

<?php wp_nav_menu( array( 'theme_location'  => 'header-menu' ) ); ?>

Once we do that, the menu will expand to the full width of the window, so we need to go to UberMenu > Advanced Settings and set the Menu Bar Width to 1170

Next, we need to make sure the content area clears the menu properly, so we add this CSS ( Adding Custom CSS ).

#sliderhome, .normal-page{
  clear:both;
}

2. Remove Residual Scripting

This script in the theme’s global.js adds scripting and styling to the menu that breaks the UberMenu functionality (around line 66):

//dropdown script
jQuery(document).ready(
  function() {

		var submenu = jQuery("ul.sub-menu");
		submenu.parent().addClass('dropdown');
		submenu.addClass('dropdown-menu');
		var submenu1 = jQuery("dropdown-menu.children");
		submenu1.parent().addClass('dropdown');
		submenu1.addClass('dropdown-menu');
		var children =  jQuery("dropdown-menu.children");
		children.parent().addClass('dropdown');
		var menuul = jQuery(".menu ul");
		menuul.parent().addClass('dropdown');
		var child = jQuery(".dropdown .dropdown-menu");
		child.removeClass("children");

		var link = jQuery(".dropdown > a");
		link.append('<b class="caret"></b>');

		children.hover(
           function(){
               jQuery(this).parent().addClass('active');
           }, function(){
               jQuery(this).parent().removeClass('active');
           }
        );
        submenu.hover(
           function(){
               jQuery(this).parent().addClass('active');
           }, function(){
                 jQuery(this).parent().removeClass('active');
           }
        );

		var menu = jQuery(".menu ul");
       menu.addClass('nav');
       submenu1.removeClass("nav");
  }
);

Unfortunately, this script is too generically written (.sub-menu) to be easily deactivated. So it has to be manually removed from the javascript file. If this were based on a class like .navbar .sub-menu, then we wouldn’t have to actually edit the javascript file to prevent it from breaking the menu.

3. Adjust z-index

Finally, we need to adjust the z-index to layer the menu over the slider properly so that the submenus don’t get obstructed.

#megaMenu{
  position:relative;
  z-index:100;
  margin-bottom:20px;
}
#sliderhome{
  position:relative;
  z-index:90;
}
.normal-page{
  position:relative;
  z-index:80;
}