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: http://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 🙂

Thank you! I’ve tried both of those, just running into a few (hopefully small) issues now. I’ve restored the header.php to the original.

http://shs.convexcode.com/

1) Mega Menus: There’s something in the header styling that’s conflicting with Max Mega Menu’s panels. For example, on the “About Us”, there’s a menu 3 levels deep. The 3rd level links only show up when hovering over them. When I removed all containing div’s / styling, Max Mega Menu showed up correctly (all the text displayed all the time, not just on hover). Is there something in particular I should be overwriting?

2) Is there a way to adjust the height of the header? I’d like a smaller height, if possible. Trying to figure out which elements to set the height on.

3) The scrolling is kind of choppy. When the bottom of the header hits the bottom of the slider, it looks like it “jumps” a bit, when scrolling slowly using the mouse wheel.

Thank you very much!

Dan

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

One additional note: I’ve also noticed that if the menu breaks to the second line, the header is no longer sticky. Looks like I’ll need to do some more tweaking. Thank you again for an awesome theme! 🙂

Dan

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.

Here is my guess for the sub menu issue. Ultra is targeting sub menus using the document structure within the main menu div when ideally it should be using more specificity. To remove this we need to remove the theme’s JS file, change it and then add it back into the child theme. It’s easiest to prepare this child theme so you can check it out and add the changes to yours:

http://purothemes.com/wp-content/uploads/2016/03/ultra-child-no-main-menu-sub.zip

Add the /js/ folder including the file in it to your child theme.

Check the child’s functions.php file where I’m removing the original JS file and enqueuing the new file. The priority (100) of that function is important.

Give it a go and let me know 🙂

Andrew,

Thank you very much!

Here’s how it currently appears: http://shs.convexcode.com

The appearance change for the height worked perfectly, as did the fix for the mega menu items disappearing when not being hovered over. I really appreciate all the time that you’ve taken to help me with this.

I was still having issues on scroll with the header (as you said, with the default width), so I ended up disabling the sticky header, and instead used the Max Mega Menu Pro sticky menu feature.

I’m thinking (but not sure) that the slight “jumpy” feel is due to a Max Mega Menu issue, or a combination, that I’m missing. Still not sure what it is, but I might try checking with that plugin author also. Did you happen to notice it “jumping” when you glanced at my site? I did not see any jumpiness on the demo, but I noticed it on my site both when I had sticky header + fixed menu, and fixed header + sticky menu.

I really appreciate all of this, and I’ll definitely be using your theme in many of my future builds!

Dan

Super 🙂 Glad that all works.

Mmm, the jumpiness isn’t ideal. It’s something we worked hard on in development. We landed up changing sticky header methods twice before settling on the current method which is pretty basic but a lot more reliable than the other two methods. I didn’t see any issues that were obvious in OS X Chrome. If you’re ok with leaving it as is then that’s cool. If not, I’ll perhaps need to login so I can change it back to the default method and take a look when I have chance, hopefully tomorrow. Let me know how you’d like to proceed here.

Thanks for your support 🙂

If you’re willing to take a look at the jumpiness, that’d be great. Do I just need to send the information marked as a private reply, or how would I need to do that?

Dan

Sure, no problem. Please, create a new user:

Role: Administrator
User: puro
Email: [email protected]

Opt for the password to me emailed.

Thanks 🙂

Thank you! I’m not sure I have my mailserver set up yet, so I went ahead and e-mailed directly as well.

I actually solved this, thank you. Something was conflicting with the flex slider, specifically the dynamic arrows. I switched to R. Slides, disabled the arrows, and no more jumping. Also, the jumping was only really noticeable when logged in as admin. (admin bar at the top conflict?)

Thank you again!

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.

Hi Dan

Sorry about the incorrect email address above! That should have [email protected].

Cheers for now 🙂

No worries, I was a little confused 🙂

I’d deleted the user account I created, since everything seems to be working well as is. Thank you again for everything! Service has been top notch, and I’ll definitely be purchasing your theme again!