Home › Forums › Support › Navigation covering page hero image: transparent only on first page of blog
- This topic has 7 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
July 5, 2020 at 1:42 am #1352411Joey
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.
July 5, 2020 at 5:43 am #1352541DavidStaffCustomer SupportHi 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.
July 5, 2020 at 8:57 pm #1353296JoeyHi 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.
July 6, 2020 at 12:53 am #1353442DavidStaffCustomer Supporttry this CSS:
.blog.paged .secondary-navigation { background-color: #000; }
July 6, 2020 at 3:31 am #1353610JoeyOh, .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.
July 6, 2020 at 4:30 am #1353663DavidStaffCustomer SupportThis topic will help:
https://developer.wordpress.org/reference/functions/body_class/
July 6, 2020 at 2:41 pm #1354464JoeyThat helps. Thanks for all your help.
July 6, 2020 at 11:51 pm #1354748DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.