[Resolved] Changing text position in hero image

Home Forums Support [Resolved] Changing text position in hero image

Home Forums Support Changing text position in hero image

  • This topic has 9 replies, 3 voices, and was last updated 2 years ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #923252


    I’d like to change the position of the text in the hero image – in this case the text “Come join us on Sunrise…” in the middle of the image: https://sunriseadventureboat.com.

    In documentation I only found instructions to change position by changing padding in Elements but this also changes the size of the image while I would like the size to stay the same and change the text position only.

    I would also like to move the logo and menu a little bit lower inside of the hero image (not with header padding because then it creates a grey area above since it’s outside of the image).

    Can you please tell me if I can do that and how?

    I find confusing all the different places where we set different paddings – some in customisation area, some in Elements area… I’m getting lost which does what and it’s a bit unpractical to keep switching between them.

    Thanks in advance for your help!

    Kind regards,


    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.


    Customer Support

    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;
    Customer Support

    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:active {
        color: #ffffff; /* Change text color */
        background: transparent;
        border: 2px solid #08cec7; /* Change border color */
    /* Static colors */
    .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.

    Customer Support

    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:


    Customer Support

    I believe that’s added with the template tag {{post_title}} in the page hero content:

    If you don’t want any content, make sure to add some HTML as suggested here:


    Perfect, thanks Leo!

    Customer Support

    Glad we could help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.