Header Button

Hi there,

in Customizer > Widgets > Header Widget add a HTML widget to which you can add your button eg.

<a class="button enquire-button" href="your_button_link_url">Button Label</a>

If you want a different style to the theme button, you can custom style the button using this CSS:

.button.enquire-button {
    background-color: #f00;
    color: #fff;
}
/* Hover color */
.button.enquire-button:hover {
    background-color: #00f;
    color: #fff;
}

Hi,

Thanks!

How do I change the font size and size of the box? Where would I add it to the above code?

Cheers

Edit this:

.button.enquire-button {
    background-color: #f00;
    color: #fff;
}

to this:

.button.enquire-button {
    background-color: #f00;
    color: #fff;
    font-size: 20px
}

The code is CSS and can be added with one of these methods:
Adding CSS: https://docs.generatepress.com/article/adding-css/

If you need further help with this, please link us to the page in question with the solution implemented.

That code isn't applying for some reason, please see y URL for ref

I’m not seeing the code being added.

Can you add it in so I can see why it isn’t working?

Please clear and disable your caching plugin as well while we are helping.

Hello,

I've managed to sort the sizing, but the colours don't seem to apply, please can you check I'm adding the code correctly?

In addition, have you got any advice on how I can align the header elements e.g. logo and "button" to be more aesthetically pleasing, I can't quite get them looking good.

I’ve managed to sort the sizing, but the colours don’t seem to apply, please can you check I’m adding the code correctly?

You can try this css:

.header-widget .textwidget a.button.enquire-button {
background-color: #f00;
color: #fff;
font-size: 20px;
}

In addition, have you got any advice on how I can align the header elements e.g. logo and “button” to be more aesthetically pleasing, I can’t quite get them looking good.

Can you specify how you want them to be aesthetically pleasing?

If you want them to be vertically aligned center, you can try this CSS:

.site-header .inside-header.grid-container.grid-parent {
    display: flex;
    align-items: center;
}
.header-widget{
order:2;
}
.header-widget .textwidget p {
    margin-bottom: 0;
}

Here's how to add CSS - https://docs.generatepress.com/article/adding-css/

Important Note: You must clear the cache after applying changes to CSS for the newest changes to apply. Else, the site will use whatever is saved in the cached CSS.