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

Solved

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

Larchi22
Tourist
6 0 3

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/

Larchi22_0-1712573180416.png

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6999 1665 2058

This is an 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:

Made4uoRibe_0-1712574465333.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
4400 1135 1393

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:

Moeed_0-1712573782419.png

 

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

 

Best Regards,
Moeed

 

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Larchi22
Tourist
6 0 3

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
Shopify Partner
6999 1665 2058

This is an 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:

Made4uoRibe_0-1712574465333.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Larchi22
Tourist
6 0 3

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"?

Larchi22_0-1712575163028.png

 

Made4uo-Ribe
Shopify Partner
6999 1665 2058

You can add margin-left; 

Made4uoRibe_0-1712578165794.png

 

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

 

Made4uoRibe_1-1712578216662.png

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

Made4uoRibe_2-1712578343789.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.