[Support request] Header Button

[Dax]

Hi, I want to add the “enquire now” link button in the header like on this site: https://reallegal.co.uk/

How would I achieve that?

[David]

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;
}

[Dax]

Hi,

Thanks!

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

Cheers

[Leo]

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.

[Dax]

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

[Leo]

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.

[Dax]

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.

[Elvin]

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.

[Author]

Posts