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?"