Kallyas (Hogash)

Are you using UberMenu 3? Please see the UberMenu 3 Kallyas Integration GUide

Kallyas, by Hogash, is a very powerful and popular theme. I have found it integrates with UberMenu pretty well out of the box, but some things can go wrong at responsive sizes, partially because some of the header dimensions are set explicitly rather than left flexible.

Using UberMenu as your responsive menu

First, if you want to use UberMenu for your responsive menu, be sure to set the Kallyas menu to Drop Down

If you use the Smooth Menu option, you will have both menus display.

I would also suggest adding

@media (max-width: 767px){
  #header nav#main_menu {
	margin:0;
	clear:both;
	float:none;	
  }
}

So that your UberMenu will automatically clear the header when at responsive sizes.

Using UberMenu full-width

By default, UberMenu will be floated right by the theme. If you’d rather have it the full width of your content area, you can add this

header#header{
	height:auto
}
#header nav#main_menu{
	float:none;
	clear:both;
	padding-top:20px;
	margin:0;
}
#page_wrapper #page_header .container{
	padding-top:160px;
}

Using UberMenu floated right

If you are using UberMenu floated right, I’d suggest using this code, which will turn the menu full-width below 1200px (you can adjust that value), so that the menu won’t overlap with other elements in your header. Whether or not you need this, and the most appropriate width, will depend on your site and the number of menu items you have

@media only screen and (max-width: 1200px) {
	header#header{
		height:auto
	}
	#header nav#main_menu{
		float:none;
		clear:both;
		padding-top:20px;
		margin:0;
	}
	#page_wrapper #page_header .container{
		padding-top:160px;
	}
}

Make the search button fit better

Buttons outside of the actual menu are tough to control, but you can resize the magnifying glass button in Kallyas to better size with UberMenu like this (good if you’re leaving the menu floated right).

#search .searchBtn{
	margin:0;
	padding:12px 12px 13px 12px;
}

You may want to change the padding based on your skin.