[Resolved] Navigation covering page hero image: transparent only on first page of blog

[Joey]

I have a full page image on the page hero of only the first page of the blog. (https://simipress.com/) The black header of the secondary navigation was covering the top of the page hero image, so I made it transparent using this code, as the page hero background is already black:

.single .secondary-navigation {
	background-color: #00000000;
}

The trouble is on the subsequent pages (clicking on next of the blog), where there is no page hero, it is transparent and shows the white background, making it hard to read the menu. (https://simipress.com/home/page/2/)

Is there a way to only make the secondary navigation transparent on only the first page of the blog? Thank you.

[David]

Hi there,

you can use this PHP Snippet to disable the Header Element on paged template:

add_filter( 'generate_header_element_display', function( $display ) {
    if ( is_paged() ) {
       $display = false;
    }

    return $display;
} );

Then those pages will respect the colors set in the Customizer.

[Joey]

Hi David, thanks for the reply. That snippet is already in my php. I had used it to get rid of the page hero image on subsequent pages of the blog.

I’m not trying to remove the header completely, just to make the background color of the secondary navigation black on those subsequent pages while keeping it transparent on the first page of the blog (my secondary navigation is at the top of the page, where it says “press books stories”). It appears black on the first page of my blog because the page hero image has a black background. It appears white on the subsequent pages because the background color of the entire theme is white.

If this isn’t possible, I could make the background of the secondary navigation black instead of transparent, and then figure out a way to lower the page hero image so it isn’t getting covered up by the navigation. Here is why I had to make it transparent in the first place, you can see where it is cutting off the top of the image:

But the transparent thing works well except for when I go to page 2.

[David]

try this CSS:

.blog.paged .secondary-navigation {
    background-color: #000;
}

[Joey]

Oh, .paged was the missing code. I was looking for hours, thank you, it worked and looks really good now.

Is this CSS theme-specific for Generatepress or universal? Just wondering if there was a resource I could learn to do more of this myself. I know generatepress has some resources here on the site, but I couldn’t find everything. My site is about done but for next time. Cheers.

[David]

This topic will help:

https://developer.wordpress.org/reference/functions/body_class/

[Joey]

That helps. Thanks for all your help.

[David]

You’re welcome

[Author]

Posts