Klaus (Bluxart)

Klaus creates significant residual styling as it wraps UberMenu, so we’ll need to use Manual Integration to replace the theme’s menu system to prevent interference.

1. Replace the theme menu

Remember: Always make theme edits in a child theme to preserve them when you update!

The theme’s menu is in two parts, so we need to do a little extra work. Open the theme’s header.php (copy it into a child theme) to make the appropriate edits:

First, there is the desktop menu and mobile nav button:

<!-- Mobile Menu -->
<a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>
    
<!-- Standard Menu -->
<div id="menu">
    <ul id="menu-nav">
    <?php 
        if(has_nav_menu('primary_menu')) {
			wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
        }
        else {
			echo '<li><a href="#">No menu assigned!</a></li>';
        }
    ?>	
    </ul>
</div>

We want to replace this with UberMenu, so we use the conditional replacement code from the Manual Integration guide and the manual integration code generated from the UberMenu Control Panel:

<?php if( function_exists( 'ubermenu' ) ): ?>
    <?php ubermenu( 'main' , array( 'theme_location' => 'primary_menu' ) ); ?>
<?php else: ?>
    <!-- Mobile Menu -->
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>
        
    <!-- Standard Menu -->
    <div id="menu">
        <ul id="menu-nav">
        <?php 
            if(has_nav_menu('primary_menu')) {
				wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
            }
            else {
				echo '<li><a href="#">No menu assigned!</a></li>';
            }
        ?>	
        </ul>
    </div>
<?php endif; ?>

Note: if you want to move the menu below the logo, move the div class="col-md-9" start and end tags inside the else statement as well.

This replaces the menu on desktop, but now we also need to remove the theme’s mobile menu so we don’t end up with two menus on mobile.

Here’s the theme’s mobile menu, also in the header.php:

<!-- Mobile Navigation Mobile Menu -->
<div id="navigation-mobile">
	<div class="container">
    	<div class="row">
        	<div class="col-md-12">
            	<ul id="menu-nav-mobile">
                <?php 
                    if(has_nav_menu('primary_menu')) {
						wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
                    }
                    else {
						echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>	
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Navigation Mobile Menu -->

We just want to prevent that from printing if UberMenu is present, so we hide it conditionally:

<?php if( !function_exists( 'ubermenu' ) ): ?>
<!-- Mobile Navigation Mobile Menu -->
<div id="navigation-mobile">
	<div class="container">
    	<div class="row">
        	<div class="col-md-12">
            	<ul id="menu-nav-mobile">
                <?php 
                    if(has_nav_menu('primary_menu')) {
						wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
                    }
                    else {
						echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>	
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Navigation Mobile Menu -->
<?php endif; ?>

2. Add CSS Refinements

On desktop, everything should be working well now. However, on mobile, you’ll want to force the theme’s grid that wraps the menu to the next line by adding this CSS to your Mobile CSS Tweaks:

.normal-header .col-md-9{
	clear:both;
	width:100%;
	float:none;
}

3. Recommended Settings

1. Full Width Submenus

To make your submenus expand wider than the right-positioned menu bar, you can set your Submenu Bounds to Unbounded

However, the theme will still restrict the width of the submenus, so to overcome this you can add this CSS in your Desktop CSS Tweaks:

.normal-header .col-md-9{
	position:static;
	padding-right:0;
}

2. Vertical Menu Position

You may want to set the Menu Bar Margin Top setting to something like 30px to move the menu down and better align with the logo.

3. Recommended Skin

You can use any skin you like, however the Vanilla skin is most similar to the default menu.