REMOVE SEARCH BAR and MAKE MENU ITEM DIFFERENT COLOUR in Refresh theme.

[Larchi22]

Hi, 

I was wondering if someone could help me out with theme code to do the following.
I would like to remove the search bar from my website in total. I would also like to make the menu heading "BOOK A TOUR" as a separate heading on the right side where the search icon is now, and have a background around the writing in blue. I have attached a photo below the URL which is roughly what I am looking for.

THANK YOU.

URL: https://5fd7d0-2.myshopify.com/

[Moeed]

Hey @Larchi22 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
details-modal.header__search {
    display: none !important;
}
@media screen and (min-width: 768px) {
a#HeaderMenu-book-a-tour {
    left: 250px !important;
    position: relative !important;
    background: blue !important;
    border-radius: 20px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Larchi22]

Hi, thank you for your help.
I have pasted it in, but the search bar is still there, please visit the URL to see.

Also, is it possible to put a specific colour? If so, here are the colour details:
HEX:: #7191ca
RBG: rgba(113,145,202,255)

Thanks Moeed

[Made4uo-Ribe · Accepted solution]

Hi @Larchi22 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
    display: none;
}
@media only screen and (min-width: 1300px){
a#HeaderMenu-book-a-tour {
    position: absolute;
    right: 15%;
}
}
a#HeaderMenu-book-a-tour {
    background: #5B77B3;
    border-radius: 10px;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Larchi22]

Thank you, exactly what i was looking for except:
It looks like this for me, how can i add a gap so the "BOOK A TOUR" is more to the right of "CONTACT US"?

[Made4uo-Ribe]

You can add margin-left; 

a#HeaderMenu-book-a-tour {
    background: #5b77b3;
    border-radius: 10px;
    margin-left: 50px;
}

if you like more far right. In the bigger screen it would be look like this. 

Here is the code. 

a#HeaderMenu-book-a-tour {
    position: absolute;
    right: 50px;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!