How to add a custom button in Dawn theme header?

[Matt-Embra]

Hi,

I am wanting to add a custom button (Book Online) to the header. Any help would be appreciated.

[suyash1]

@Matt-Embra - This will need code editing, where exactly do you want this button?

[Matt-Embra]

I would like the button in the right of the header before the cart symbol.

[suyash1]

@Matt-Embra - will need to edit header.liquid file to add button code and style it as per the need, are you familiar with the coding part?

[Matt-Embra]

Yes I can add the code to the relevant files. A rectangle button with rounded corners would be ok if that’s easier?

[GemPages]

Hello @Matt-Embra

I would like to give you the recommendation to support you.

Let’s try adding the below code into the header.liquid file like this: https://prnt.sc/FY6a_Asy85_s

I hope the above is useful to you.
Best regards,
GemPages Support Team

[suyash1]

@Matt-Embra - go to header.liquid file, go to line 640 and copy paste below code, you can apply css as per the need

  [Book Online](https://stickeredge.com/pages/get-a-quote)

this is css for above button wich you need to add to the very end of your base.css file

.book_online_button{display: block;}
.book_online_button a{text-decoration: none; background-color: #5252f2; padding: 10px;
color: #fff;    border-radius: 10px; font-size: 1.4rem;     width: 100%;    display: block;    max-width: 100%;}

[Matt-Embra]

@suyash1 thank you so much for the help, works perfectly!

[tomylandais]

Hello, I tried the solution above and it works on desktop but on mobile I would like the button to appear at the end in the menu drawer. Can someone help me for that ?

[Hayley01]

Hi Suyash1

I tried the above but I had an error message while pasting to line 640. Just wondering if the information has changed with any theme updates? Thank you