Archived topic
transparent header on homepage only
5 replies · Started by casey on June 8, 2021
hey, I'm trying to add a transparent header (logo in the left, nav on the right) only on the homepage but I'm having some trouble.
1). I'm trying to use the "Offset Site Header Height" but it does not seem to work.
2). how do I get rid of the border that I applied to the main header (for the rest of the site) for the homepage header.
Thanks.
1). I’m trying to use the “Offset Site Header Height” but it does not seem to work.
Not sure what you mean by this, can you explain a bit more?
2). how do I get rid of the border that I applied to the main header (for the rest of the site) for the homepage header.
We can use page-specific <body> class selectors.
Example: On the current page you're working on, the page ID is 13019. That said, we can do something like this:
body.page-id-13019 .main-navigation {
border: unset;
}Or if it eventually gets assigned as the actual homepage, you can do
body.home .main-navigation {
border: unset;
}No problem, I'm trying to do what's explained on this page:
https://docs.generatepress.com/article/transparent-header-and-navigation/
The "“Offset Site Header Height” would add some space between the header and the content below.
Thanks, I'll do that once we figure out the spacing.
What was your expected behavior w/ the Offset element?
Here's a very brief demo of how it's intended to work - https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height
Hey Elvin, that's exactly what I was looking for. Problem is let's say I have the padding set to 0 on my page, the header overlaps with the content when I have the offset element set. I could even put it to 200px and it's not changing anything. So I think I'll just add some padding to the page itself and solve it like that. Anyways, thanks for the help!
Quite difficult to determine the cause unless I fully check your site to check what might've prevented it from working.
So I think I’ll just add some padding to the page itself and solve it like that. Anyways, thanks for the help!
Ah yes, that can work as well. No problem. Glad to be of any help. :)
