[Resolved] Shaped-header

Home Forums Support Shaped-header

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1018872
    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>
    #1018938
    David
    Staff
    Customer Support

    Hi there,

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

    #1018945
    An Nguyen

    Hi David,

    How can I use this effect?

    Thanks.

    #1018996
    David
    Staff
    Customer Support

    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.

    #1020085
    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.

    #1020487
    David
    Staff
    Customer Support

    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.

    #1020504
    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

    #1020521
    David
    Staff
    Customer Support

    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.

    #1020555
    An Nguyen

    Hi David,

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

    Thanks for your support.

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