Shaped-header

[An Nguyen]

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>

[David]

Hi there,

thats because you have the Navigation as Header – there is no site-header for that CSS to apply to.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[An Nguyen]

Hi David,

How can I use this effect?

Thanks.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[An Nguyen]

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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[An Nguyen]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[An Nguyen]

Hi David,

You gave me a correct answer that I expected. It displays perfectly! You’re awesome.

Thanks for your support.

[David]

Glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts