A user seeks to fill white space in their Dawn theme (v14) header by adding a call-to-action button or repositioning the search bar. They also want to change the search bar’s background color from white to light blue.
Solution Provided:
A contributor shares custom CSS and HTML code snippets that:
theme.liquid and base.css filesImplementation Notes:
<head> tag in theme.liquidCurrent Status:
Initially resolved successfully, but the user reports the button disappeared after a theme update. The original code no longer works when re-applied to theme.liquid, leaving the issue unresolved and awaiting further assistance.
Hello, I am wanting to fill this white space in our header with something like a contact CTA button or move the search bar across to the middle here. I’m not sure how to do this, please advise?
I am using Dawn theme version 14. Website is not live yet, link is:
https://5b1cfb-2.myshopify.com/
password is Blues2020
I also want to change the white background for the search bar to light blue if possible?
Hi, @KateD199
I can help you with it. So I need to access your store as a collaborator if possible.
Yeah sure, am once in your shoes but a Shopify professional helped me out so I would suggest you to have one and if you’re finding it difficult in getting one, I can help you ask the one that helped me if he’s available how about tha? Cool?
Thank you so much for this, only I don’t have the sections/settings you’re talking about!
I only have the below sections and when I click on the header section the only things I can change there are the desktop menu position, what menu to use and what type, mobile layout for logo and then language and region selectors.
Hi,
The following code snippets should do the trick. The button only works on resolutions above 1200. If you encounter any issues again, feel free to write, I’ll help.
Navigate to the ‘Edit Code’ option in your theme settings, then search for ‘theme.liquid’ in the search bar.
Paste the following code below the ‘’ tag. Please refer to the attached screenshot for guidance.
Note: you can change the button link and text from the following location.
Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.
input.search__input.field__input {
background: #154770;
}
input.search__input.field__input + .field__label {
color: white;
}
button.search__button.field__button {
color: white;
}
@media (max-width: 1200px){
.cto-button{
display: none!important;
}
}
Terence
You’re amazing, this worked like a charm!! Thanks so much!
The only thing is it still appears on mobile view, is there a way to change this? Thanks!
You’re welcome, Kate 
The code I wrote always works. Adding a button without editing JS or HTML is difficult. In the screenshot below, the button does not appear on mobile. What phone are you viewing it on exactly?
Ah ok my apologies - I didn’t test it on an actual phone just in the mobile view on shopify and it still shows up so I just assumed (as screenshot below). I checked on my mobile and its not coming up so thats great, thanks so much again!
I think I’m confused. Will this button be visible on mobile as well, or only on the desktop version?
I just wanted it to be visible on desktop - which it is, just for some reason when I click mobile view when customizing the theme on shopify is still shows, but on actual mobile it doesnt come up. So it works perfectly - thank you again!
You are welcome.. It was just a small thing for me.
I’m not sure what level of assistance you’re looking for here, but if you’re seeking affordable, monthly, or long-term advanced help, we can also offer you the 'Shopify Premium Support’ service that we provide to many others here. Our service is not hourly or per project, it’s monthly. You can request as much assistance as you need. We can customize your theme according to your requirements.
There is no limit as a support request!
Generally, we provide superficial assistance here. The detailed help is provided to our clients through ‘Premium Support.’
If you have an e-commerce store or website, working with someone who can provide continuous assistance will always be better for you.
In addition to quick solutions, we provide:
and much more…
Maybe you’re tired of constantly seeking help here, so I wanted to write this. Assistance on the Shopify community is usually quite superficial.
If you’re interested, you can check out the link in my signature. Feel free to reach out via private message or email if you have any questions. 
Terence…
Hi Terence - just wondering if you are able to assist again. Since updating our theme the button has disappeared. When I paste the code above under theme.liquid it does not work.
Any advice? thanks!
