Theme Header PHP File Ultra Premium

Hi Dan

Thanks for reaching out 🙂

Sure, you can find the original header.php contents here: https://themes.svn.wordpress.org/ultra/1.0.2/header.php

All WordPress themes completely overwrite their own folder during theme updates so if you ever need to edit theme files directly, it needs to be done from within a child theme to make those changes update safe.

Looking over this thread here: https://purothemes.com/support/topic/which-menu-plugins-are-supported/, I have tested MMM and I don’t think it needs any code level changes. My initial feedback was as follows:

I haven’t done deep testing, but a quick initial test shows that MMM works nicely with Ultra. Just de-activate the Ultra responsive menu at Appearance > Theme Settings > Navigation so you don’t land up with two responsive menus. You’ll need to design the MMM theme to suit Ultra. Remove the default dark background etc.

The following CSS added to Appearance > Custom CSS or a child theme style.css will help with the alignment of MMM when used in the primary menu location:

/* MMM */

.main-navigation {
	align-items: center;
	display: flex;
  	justify-content: center;
}

#mega-menu-wrap-primary {
	float: left;
}

Can you perhaps, try that out and let me know how it goes 🙂

1. My previous CSS isn’t helping your implementation of MMM. It looks like you can remove all child style.css rules except for the last one. All of these don’t appear to have any impact:

.main-navigation {
	width:100%!important;
	align-items: center!important;
	display: inline!important;
	max-width:650px!important;
  	
}

#mega-menu-wrap-primary {
	width:100%!important;
	float: left!important;
}

.site-header {
	height: 60px!important;
}

2. To adjust the header height in Ultra Premium go to Appearance > Customize > Theme Design > Header > Height. To do the same in Ultra Free, add to your Custom CSS plugin or child style.css the following:

.site-header,.site-header .site-branding-container,.main-navigation .menu-search {
    height: 112px;
}

@media (min-width: 1024px) {
    #main-slider.overlap {
        margin-top: -112px;
    }
}

.main-navigation {
    height: 112px;
}

.main-navigation div > ul > li > a,.main-navigation .menu-search .search-icon:before {
    height: 112px;
    line-height: 112px;
}

.main-navigation ul ul {
    top: 109px;
}

112px is the default. The 109pxvalue must be three less than whatever you change all of the 112px values to.

3. The sticky header shouldn’t be jumping. Are you seeing the same problem in the demo?

Home

It’s, unfortunately, a theme default at the moment that the header is only sticky above 1024px, largely due to the complications of sticky elements on mobile. Ideally, MMM should match that and change to a mobile menu at 1024px.

Within the CSS I sent in 2.) is a rule that should vertically align the menu in the header. I’m working on the formatting issue now.

Nicely done! I appreciate the feedback. Thanks for keeping me updated. Should any other questions arise, please, feel free to reach out.

All the best.