page hero & header styling

[Katie]

Hi, new page hero creator here, looking for some help on a few styling elements.

This is the page: https://redshiftmedia.org/

1 – how do I offset the header bar so that it’s not flush to the top of the page? I’d like it to show as:
[small slice of hero image, say 45px or so]
[red header bar with site title overlaying on top of image]
[rest of image/hero]

2 – I’d like to try a white border around the hero title text (solid white line, still a transparent background behind the text). I tried modifying the css of example 3 at https://docs.generatepress.com/article/page-hero-examples/ but wasn’t successful at getting a border to display

Also re: header bar, how do I set it on mobile so that the header/footer text stays aligned left and doesn’t automatically align center?

Thank you!

[Elvin]

Hi,

1 – how do I offset the header bar so that it’s not flush to the top of the page? I’d like it to show as:
[small slice of hero image, say 45px or so]
[red header bar with site title overlaying on top of image]
[rest of image/hero]

For the small slice of hero image, you’ll have to remove the min-height of 100vh on the page hero.

The image size is directly tied to the size of the page hero as the image is added as its background image meaning the image will resize to fit the div container.

As for making the header bar overlay the page hero, you can try merging the header to the content below it.

Check this documentation out: https://docs.generatepress.com/article/header-element-overview/#site-header

2 – I’d like to try a white text border around the hero title text. I tried modifying the css of example 3 at https://docs.generatepress.com/article/page-hero-examples/ but wasn’t successful at getting a border to display

You can add the border to the hero h1 text by using this CSS:

.page-hero h1 {
    padding: 20px;
    border: 2px solid white;
}

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts