Archived topic
Shaped-header
9 replies · Started by An Nguyen on September 25, 2019
Hi David,
I tried to do with your CSS on my single post header (hero-page) in this post: https://generatepress.com/forums/topic/shaped-header/
I added your css but nothing happens. Could you help me with this effect? What's html code that I need to add on?
My current html on hero-page on single-post:
<header>
<div class="site-header">
<h1 >
{{post_title}}
</h1>
..........
</div>
</header>Hi there,
thats because you have the Navigation as Header - there is no site-header for that CSS to apply to.
Hi David,
How can I use this effect?
Thanks.
I don't know - that code was for a very specific tall site header design. I can't see how this can be applied to the navigation.
Hi David,
If I don't use Header as navigation. Now, Navigation and Header are separate. I can set the effect but how can I set text title in front of siteheader background? Now text is hide after background.
Thanks.
Without knowing what the end result is meant to look like i am not able to answer that.
The shaped header code i provided for that user was very specific to his site - the header content was in place, he provided some screenshots and it was fairly easy to assist. If it had not been so i couldn't of helped.
Hi David,
Can you go to my homepage following the link? You will see it! I make a test on my homepage.
I just want to know how to display text title in front of site header background. Now, site-header background hides the text-title.
Thanks
You can only move the Header Element in front of it like so:
.page-hero {
position: relative;
z-index: 100;
}But you cannot move only the text inside the header element in front of a completely separate element.
the pseudo element would have to exist on the page-hero ie. .page-hero:before for that to work.
Hi David,
You gave me a correct answer that I expected. It displays perfectly! You're awesome.
Thanks for your support.
Glad to be of help.
