inside_mobile_header below logo

The add the button, I would create a new Hook Element and add it to the generate_after_header_content hook:

<div class="book-now hide-on-desktop hide-on-tablet">
    Your button in here
</div>

I definitely wouldn't suggest adding it to the sticky navigation due to UX concerns Leo pointed out above.

Perhaps instead of the full phone number in the navigation, you just do an icon along with a book now icon? That way they should both fit.

Thanks Leo and Tom

I appreciate your help. Ideally the booking button would be part of the sticky menu so it is always showing but I do take your point re usability.

Would this be possible?:
https://imgur.com/a/Js1dp05

Otherwise, I can try the icon suggestion (Thanks Tom) but would prefer the show the full number if possible.

Many Thanks
Marty

That should be possible. Only with the sticky menu, or all the time? If you need it all the time, can you turn on the mobile header?

Hi Tim. Yes, it would be needed all the time, so I'd be happy to run with that option and switch of the sticky header. Thanks, by the way, appreciate your assistance.

Any chance you can turn on the mobile header/sticky mobile header now? It will help me provide the most accurate code for you :)

Hi Tom. That's done, thanks.

So now you'll want to change your hook location to generate_inside_mobile_header and add your button to it:

<div class="mobile-bar-items">
    <a href="tel:000 000 000">000 000 000</a>
    <a href="#" class="book-now">Book Now</a>
</div>

Then add this CSS:

#mobile-header .mobile-bar-items {
    order: 10;
    width: 100%;
    display: flex;
}

#mobile-header .mobile-bar-items a {
    width: 50%;
    box-sizing: border-box;
    text-align: center;
}

#mobile-header .mobile-bar-items a.book-now {
    background: red;
}

That's great, thanks Tom, it's much appreciated. Works a charm.

No problem, glad I could help :)