full width image above navigation, different on each page

[Lisa]

Hi,

Is it possible to have a full-width image just above the primary navigation? I found the support forum on using the After Header Content hook, and it is close, http://giselenadeau.apps-1and1.com/ but I need the image to be full width and dropping behind the navigation background. The goal is this: http://nadeauerisadisability.com/ (A recommended width would be helpful, too.)

If I set the Inner Header Width to Full, everything in the Header goes wacky, with the header image at the bottom left of the screen, followed by the banner image then the header widget up in the upper right.

Thanks for your help!

Lisa

GP Premium 1.2.94

[Tom]

Hi there,

You could use the “After Header” hook, but you would need to change the priority so it shows up before the navigation:

add_action( 'after_setup_theme','tu_change_hook_priority' );
function tu_change_hook_priority()
{
	remove_action('generate_after_header', 'generate_hooks_after_header', 10);
	add_action('generate_after_header', 'generate_hooks_after_header', 2);
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lisa]

Thanks for that reply, I tried adding the php and it didn’t work. Could be due to where the wordpress site is installed and must reside. I thought I could try your Exhibit theme as an alternate solution. I’ve uploaded it to a different staging site, http://4d0.e58.myftpupload.com to test.

Using your previous support article, https://generatepress.com/forums/topic/header-image/, I:

1. Put the logo, email and phone number in the Before Header hook
2. Used the php conditionals in Before Header Content:

//for home page

<?php if ( is_page( '' ) ) : ?> 
      <img src="http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/courthouse-lg-v2.png" alt="" />
<?php endif; ?>

//for test page
<?php if ( is_page( 'test' ) ) : ?>
      <img src="http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/skyline-lg.png" alt="" />
<?php endif; ?>

On the home page, the courtroom picture is displaying twice, on the test page the courtroom picture is displaying twice and the city skyline is also displaying. The goal is to have the home page display the courtroom picture once and the test page to only display the skyline. From reading your header-image post, I have double checked that the php conditionals are in the Before Header Content hook.

Can you help fill in the blanks on what I am missing?

Thank you for your help,

Lisa

[Tom]

You could try something like this:

<?php if ( is_front_page() ) { ?> 
    <img src="http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/courthouse-lg-v2.png" alt="" />
<?php } elseif ( is_page( 'test' ) ) { ?>
    <img src="http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/skyline-lg.png" alt="" />
<?php } ?>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lisa]

Getting closer, http://4d0.e58.myftpupload.com/. The double images are gone but I’m getting the courtroom image on the test page instead of the skyline.

Thank you for helping me with this!

ps – your baby is beautiful. Love your profile image.

[Leo]

Looks like the code is working to me?
I see the court house on your front page: http://4d0.e58.myftpupload.com/
and skyline on your test page: http://4d0.e58.myftpupload.com/test/

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lisa]

Just tried it in Opera, IE & Firefox (usually use Chrome) and still seeing the double courtroom images on the home page and the courtroom & skyline on the test page. On Chrome I’m seeing the courtroom image on the home page and test page.

Any ideas why it is not resolving consistently?

[Leo]

The top court house image on your home and test page has this image URL: http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/courthouse-lg.png and I don’t see this image being added in all the codes above so you must have added somewhere. It’s not a duplication with second court house image which has this URL: http://4d0.e58.myftpupload.com/wp-content/uploads/2017/03/courthouse-lg-v2.png

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

It might be easier just to use the Featured Image meta box and tell it to appear above the navigation?

Do you have the Page Header or Blog add-ons activated?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lisa]

Leo – that did the trick! I hadn’t realized I had a courtroom image link in the Before Header hook because it was below the html for the logo, phone & email. Thank you!!!

One last issue – there is a gap between the image and the navigation, http://giselenadeau.apps-1and1.com/in-court/.

I’ve tried:

#masthead > div {
margin: 0px;
padding: 0px;
}

and

#masthead > div {
margin: 0px !important;
padding: 0px !important;
}

and

.inside-header {
padding-top: 0px;
padding-bottom: 0px;
}

I’ve also tried taking the padding off the banner image:

.banner-img {
width: 100%;
margin: 0px;
padding: 0px;
}

No luck yet. In the Customizer, the Header Padding is set to 0 for all options. I need to get rid of the space between the masthead and navigation.

Do you have any insight on what I need to do?

Thank you!

[Leo]

Try

.inside-header {
    line-height: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lisa]

That did the trick! Thanks ever so much for your quick responses last night and this morning.

Love working with GeneratePress!

[Leo]

You’re very welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts