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

Home Forums Support Navigation covering page hero image: transparent only on first page of blog

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1352411
    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/)

    Image showing different header colors

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

    #1352541
    David
    Staff
    Customer Support

    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.

    #1353296
    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:

    Secondary navigation covering page hero

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

    #1353442
    David
    Staff
    Customer Support

    try this CSS:

    .blog.paged .secondary-navigation {
        background-color: #000;
    }
    #1353610
    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.

    #1353663
    David
    Staff
    Customer Support
    #1354464
    Joey

    That helps. Thanks for all your help.

    #1354748
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.