Changing text position in hero image

Another question... I can't seem to change the size of the first line in hero image. It's normally Heading 1 but when I change the size in Typography > Headings, it doesn't do anything. I can change height, margin, text transform, weight... everything but size. When I change the size nothing happens.
The second line is Heading 2 and changing size works.

Also, how do I change the color and hover color of the "Explore" button? Changing color under Colors > Buttons doesn't work.

Thanks!

Hi there,

1. In your header element you have 15% top padding and 15% bottom padding. So a total of 30%.
As long as the two remain a total of 30% then the background will remain the same size. So you could do 20% top and 10% bottom and this would move the text lower down. Or the other way around to move it up.

2. We would need a little CSS to shift the nav down, so add this to your Customizer > Additional CSS:

.header-wrap #site-navigation {
    margin-top: 15px;
}

3. The H1 text has some CSS applied to it for the Header Element. In Additional CSS look for this:

.hero-headline {
    font-size: 34px;
    letter-spacing: 6px;
}

You can either delete it entirely, or just change the font-size property.

4. The button is a custom styled button, so more CSS. Again in Additional CSS look for this:

/* Hover colors */
.button.ghost:hover,
.button.ghost:active {
    color: #ffffff; /* Change text color */
    background: transparent;
    border: 2px solid #08cec7; /* Change border color */
}

/* Static colors */
.button.ghost,
.button.ghost:visited,
.button.ghost:focus {
    color: #ffffff; /* text color */
    letter-spacing: 1px;
    background: transparent; /* Makes background transparent */
    border: 2px solid #ffffff; /* Sets border color and thickness */
    padding: 8px 20px;
    margin: 10px;
    border-radius: 6px;
    transition: all 0.6s ease 0s;
}

I have added comments in the code above to show the lines to change.

Thanks David, worked perfectly.

Another (unrelated) question: How can I limit/determine the width of the content without affecting header and menu width? Now when I go to Layout options > Container Width, it changes the width of both, header and content but I would only like to change content width.

Does this help?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-3-set-the-width

Let me know :)

Hi Leo,

Thank you but these instructions seem to only explain about "rough" width options that spread over the whole page or not, I can't find instructions on how to change/control width more precisely.

Anyway, I think I found what I was looking for in Content Padding inside Container options. I increased Right and Left Padding and it works.

However, now there’s another option I can’t find… how do I remove the Menu Title in the middle of the photo/header? Here’s a screenshot:
https://screencast.com/t/LiqYUAkq

Thanks!

I believe that's added with the template tag {{post_title}} in the page hero content:
https://docs.generatepress.com/article/header-element-template-tags/

If you don't want any content, make sure to add some HTML as suggested here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content

Perfect, thanks Leo!

Glad we could help :)