[Drop-in] Header Cover Full-Size Background Photo

This is a simple drop-in that modifies the behavior of the Header Cover Featured Image setting. By enabling this drop-in, the featured image you set will blend the background photo into both the header and headline block area.

What the default Header Cover setting looks like:



...and this is what the drop-in modifies it to look like:



Pretty big difference! At some point, maybe as soon as MD4.8, this will be a built-in feature and this Drop-in no longer needed. I thought this would be useful for some of you in the meantime.

DROP-IN INSTALLATION INSTRUCTIONS

1) First, make sure your site is running the MD child theme (you can download the MD starter theme from your account)

2) Download the Drop-in file below:

View attachment header-cover.php

3) Upload the file into your child theme folder via FTP, preferably into a /dropins/ folder (for organization reasons), but you can upload it anywhere

4) Assuming you uploaded the file into the /dropins/ folder (create one if you haven't already), add this line anywhere in your functions.php file, then save and upload:

include_once( get_stylesheet_directory() . '/dropins/header-cover.php' );


5) Finally, add the following CSS to your style.css file to make your header logo and menu text and links white:

.has-header-cover .header {
background-color: transparent;
color: #fff;
}

.has-header-cover .header .logo a,
.has-header-cover .header .tagline,
.has-header-cover .header .menu > .menu-item > a > .menu-item-title,
.has-header-cover .featured-image .headline,
.has-header-cover .featured-image .byline {
color: #fff;
}

.has-header-cover .featured-image .byline a {
border-bottom-color: #ddd;
color: #ddd;
}

@media all and (max-width: 900px) {
.has-header-cover .header .sub-menu .menu-item-title {
color: #fff;
}
}


After that, any post or page you have already made a header cover will adapt to the new layout.

 

[Alex]

That's what's throwing me off and making me think that the function I pointed out to you got modified somewhere in your child theme. When I look at your sites source I see the following:



There's something modifying the script because that's not the original code in your source. I couldn't think of anywhere else this script would be modified from if not your child theme, or a plugin, are you sure there isn't anything there with that function in it?

 

[camerondare]

That's what's throwing me off and making me think that the function I pointed out to you got modified somewhere in your child theme. When I look at your sites source I see the following:

View attachment 1205

There's something modifying the script because that's not the original code in your source. I couldn't think of anywhere else this script would be modified from if not your child theme, or a plugin, are you sure there isn't anything there with that function in it?

I see this in my CHILD THEME functions.php

EDIT: Got it. Works now.  One thing is that it shows menu icon + menu, instead of just the icon menu like on gamequitters.com mobile. Any idea how I can change that? 

Thanks man, really appreciate all of your help.

 

[Alex]

Awesome. I'm removing the "Menu" text in MD4.8, but you can hide it for now with this CSS:

.header-menu-trigger-text { display: none; }

 

[camerondare]

Awesome. I'm removing the "Menu" text in MD4.8, but you can hide it for now with this CSS:

.header-menu-trigger-text { display: none; }

Thanks!