Adding second button in header

Hi!

Looking for a way to add a second button directly to the left of the 'EMAIL US' button, which will appear on every page across the site. So it should look the same, but instead of 'EMAIL US' it should have the phone number, as you can see in the mockup i've made on the homepage.

Instead of the mockup I've made on the homepage, I'd like it to be next to 'EMAIL US' and appear on every page as part of the header.

Website is www.brainboxlearning.co.uk, password is brainbox

Thanks 🙂

You can follow this

9 minutes ago, tuanphan said:

You can follow this

 

Like magic! This worked BUT any way I can make it match the button next to it?

Thanks

On 3/21/2024 at 11:10 PM, DomGape said:

Like magic! This worked BUT any way I can make it match the button next to it?

Thanks

I see you already figured it out?

20 hours ago, tuanphan said:

I see you already figured it out?

@tuanphan yes, that bit anyway! I’m struggling with how to add a small gap between the two buttons though? They’re touching at the minute which is too close.

I’ve also used some code so they display on mobile, but again, I’d love a small gap. Ideally (on mobile) the logo on the far left, the hamburger menu on the far right, and the two buttons completely centered. Any suggestions?

3 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

div.header-display-desktop a.btn:nth-child(2) {
    margin-left: 1.5vw !important;
}

With mobile, use this CSS code

@media screen and (max-width:991px) {
.header-title-nav-wrapper {
    order: 1 !important;
    flex: unset !important;
}

div.header-burger {
    order: 3 !important;
    flex: unset !important;
    right: 0 !important;
}

.header-actions.header-actions--right {
    order: 2 !important;
    flex: unset !important;
    left: 50% !important;
    position: absolute;
    transform: translateX(-50%) !important;
    width: unset !important;
}

.header-mobile-logo {
    padding: 0 !important;
}

.header-display-mobile {
    justify-content: space-between !important;
}
}

Perfect, thank you so much!