Flawless (GoodLayers)

Flawless by GoodLayers introduces some residual styling (see also: residual styling troubleshooting guide) and residual scripting into UberMenu, so we need to alter the theme to prevent the theme’s menu from affecting UberMenu.

By creating a child theme we can override the `header-nav.php` file to make this process future-compatible.

Result

Header Style 1

Header Style 2

Child theme to create this integration available at the end.

Recommended Skin: Vanilla

Removing residual styling and residual scripting

To prevent the theme’s scripts and styles from affecting UberMenu, we need to remove the element below:

<nav class="gdlr-navigation" id="gdlr-main-navigation" role="navigation">

The best way to do that is to copy `header-nav.php` into a child theme and make it look like this:

<?php 
	if( has_nav_menu('main_menu') ){
		
		wp_nav_menu( array('theme_location'=>'main_menu') );
		
		global $theme_option;
		if( empty($theme_option['enable-top-search']) || $theme_option['enable-top-search'] == 'enable' ){
			echo '<div class="gdlr-nav-search-form-button" id="gdlr-nav-search-form-button"><i class="icon-search"></i></div>';
		}
	}
?>

Menu Position

If you want the menu aligned to the right like Flawless’s Header Style 1, we need to float it right

.gdlr-style-1.gdlr-navigation-wrapper{
	float:right;
}

Menu Height

To make the menu appear like in the Flawless Header Style 1, we need to increase the height of UberMenu

.gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > a, 
.gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:36px;
  padding-bottom:36px;
}

When the menu is fixed, we need to reduce that padding

.gdlr-fixed-menu .gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > a, 
.gdlr-fixed-menu .gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:25px;
  padding-bottom:25px;
}

Search Button

To allow for the Flawless search button to work, we need to position it absolutely and leave space for it in the menu

/* Search Button */
#gdlr-nav-search-form-button{
    position:absolute;
    right:20px;
    top:22px;
    z-index:50;
}
.uber-wrap-with-search #megaMenu ul.megaMenu{
	padding-right:70px;
	z-index:20;
}

Submenu Positions

With Header Style 1, to allow the submenus to be the full width of the site’s content area, we can add this CSS:

@media only screen and (min-width: 960px){
	.gdlr-style-1 #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
		width:1000px !important;   
		max-width:none !important;
		right:0;
		left:auto;
	}

	/* Search button submenu alignment */
	.uber-wrap-with-search #megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
		right:70px !important;
	}
}

CSS Tweaks

Flawless adds `width:auto` to every image. This will override the image sizing code used in UberMenu, so we need to give UberMenu images a specific style if your images are being resized:

/* Override Flawless styles that will make images display at natural width */
#megaMenu .ss-nav-menu-with-img img{
  width:16px;
}

Responsiveness

To prevent the Flawless responsive menu from appearing, switch it off in the settings

We also want to make the responsive toggle full width, reduce the item padding, and hide the search button at responsive sizes.

@media only screen and (max-width: 767px){
	.gdlr-navigation-wrapper{
		float:none;
		width:100%;
		margin-bottom:10px;
	}
	.uber-wrap #megaMenu ul.megaMenu > li.menu-item > a, 
	.uber-wrap #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
		padding-top:15px;
		padding-bottom:15px;
	}
	#gdlr-nav-search-form-button{
		display:none;
	}
	.uber-wrap-with-search #megaMenu ul.megaMenu{
		padding-right:0;
	}
}

Child Theme

Here’s a child theme that you can install which will automatically create all of the above changes. You should still check the CSS to tweak things the way you like.

Flawless Child Theme

To use the child theme, make sure your Flawless theme is installed in the directory wp-content/themes/flawless, without any version number attached.