How can I make a search bar appear on icon click for mobile only?

[ChrisW3]

On mobile only

We want to have a search icon in our header, that when it is clicked shows the search bar. Currently a search bar is permanently visible.

Here are three Shopify stores that have this.

https://www.racketworld.co.uk/

https://www.padelstation.co.uk/

https://uk.gymshark.com/

[sahilsharma9515]

Hi @ChrisW3

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[sahilsharma9515]

Hi @ChrisW3 Thanks for the URL, I have looked into the site and to accomplish the same you need to add custom code in the store.

I can provide you the base code and you can edit it according to your needs, If you need the exact code then I will need to look into the theme code so that I can provide you the exact code.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[ChrisW3]

Hi please provide the base code thanks

[sahilsharma9515]

Hi @ChrisW3 Please follow the steps:

1. Locate the search bar code in your Shopify theme: Typically, the search bar code is located in the header section of your theme. You'll need to find the HTML code responsible for displaying the search bar.
2. Modify the HTML: Instead of completely removing the search bar, you'll wrap it inside a container along with the search icon.
3. Add CSS: Style the search icon and the container to make it look like a clickable button.
4. Add JavaScript/jQuery: Use JavaScript/jQuery to toggle the visibility of the search bar when the search icon is clicked.

Here's how you can do it:

Base code:

<!-- Place this HTML code where you want the search icon and search bar to appear -->
<div class="search-container">
    <div class="search-icon">
        <!-- Your search icon image -->
        <img src="search-icon.png" alt="Search Icon">
    </div>
    <div class="search-bar">
        <!-- Your existing search bar HTML code -->
        <!-- Make sure to keep the existing search bar code -->
    </div>
</div>

Css code:

/* Hide the search bar by default */
.search-bar {
    display: none;
}

/* Style the search icon */
.search-icon {
    cursor: pointer;
}

.search-icon img {
    width: 20px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
}

Javascript Code:

$(document).ready(function() {
    // Toggle search bar visibility when search icon is clicked
    $('.search-icon').click(function() {
        $('.search-bar').slideToggle(); // You can use any animation effect you prefer
    });
});

Replace 'search-icon.png' with the path to your search icon image.

Adjust the CSS and JavaScript as needed to fit your theme's structure and requirements.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Cannonleo]

hi I was searching the internet until I stumbled on this page and had to register 

I have almost the same problem, but in this instance, I have been able to add custom SVG icons for most of my store icons, my main concern is, that I want to add a custom search button icon only for the mobile view as the current icon is white and its size does not align well to the others, I don't  want the desktop version to be touched in terms of the search icon

only the mobile

please help me 

theme: warehouse

store URl: https://180by2.co.za/

[Cannonleo]

hi I was searching the internet until I stumbled on this page and had to register 

I have almost the same problem, but in this instance, I have been able to add custom SVG icons for most of my store icons, my main problem is, I want to add a custom search button icon only for the mobile view as the current icon is white and its size does not align well to the others, I don't  want the desktop version to be touched in terms of the search icon

only the mobile

please help me 

store URl: https://180by2.co.za/

[sahilsharma9515]

Hi @Cannonleo I got you, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

@media-screen and and (min-width: 600px){
.header__action-item.hidden-tablet-and-up {
    color: #838383;
    padding-top: 4px;
    padding-bottom: 3px;
}
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

Result:

Note: it will not effect anything in your desktop version so you don't need to worry about that.

Hopefully it will help you. If yes then Please don't forget hit Like!

Best Regards

Sahil

[Cannonleo]

hi I did add the code in the theme.css as this was what I could find, it did not work, and I sent an earlier reply that somehow seems to be deleted when I tried to edit to update you on a new development 

so 

old reply: it didn't work and I sent two screenshots, I added the original code to the end of the css

new update: while playing around with the  Custom CSS code section in the designer, I clicked on the mobile header, and modified the original code to this below
.header__action-item.hidden-tablet-and-up {
color: #838383;
padding-top: 4px;
padding-bottom: 14px;
}

this is how it has worked so far 

[Cannonleo]

in the same vein, can you look at the website and give me tips to improve the speed and performance