[Resolved] full width image above navigation, different on each page

Home Forums Support full width image above navigation, different on each page

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #288997
    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
    #289007
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #289436
    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

    #289482
    Tom
    Lead Developer
    Lead Developer

    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 } ?>
    #289491
    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.

    #289501
    Leo
    Staff
    Customer Support

    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.

    #289511
    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?

    #289519
    Leo
    Staff
    Customer Support

    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

    #289547
    Tom
    Lead Developer
    Lead Developer

    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?

    #289715
    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!

    #289718
    Leo
    Staff
    Customer Support

    Try

    .inside-header {
        line-height: 0;
    }
    #289759
    Lisa

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

    Love working with GeneratePress!

    #289941
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.