Archived topic

Position Button on Header Element

3 replies · Started by troyw on February 22, 2021

Viewing posts 1–4 of 4

February 22, 2021 at 10:23 pm #1668673

Hi guys,
I have a button on the homepage header called 'Visit the sale', but as you will see, it is in completely the wrong position. I need to lower it a fair bit.
I have gone through the Additional CSS and the Style Sheet in the Child theme, looking for a piece of Page Hero code to adjust the position, but I can't seem to find any.
How can I move the button down the Header element?

Thanks

February 22, 2021 at 10:33 pm #1668678

Hi there,

With the current padding setting of your page-hero, the way to go about setting the placement of your button is by using position: absolute.

Say, for example, you want the button to be placed on the horizontal center, vertical bottom of the page hero, you add this CSS:

.page-hero{ position: relative; }

.page-hero a.smooth-scroll.button.ghost {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
}

Adjust the values to your preference.

February 22, 2021 at 10:49 pm #1668693

Thanks so much Elvin

February 22, 2021 at 10:51 pm #1668695

No problem. :D

This archived topic is closed to new replies.

Start building better websites today.