Issue with Predicative Search

[avk9641]

Hi, 

I am having an issue where the search icon in my header is larger than the other icons. Also, when I click the search icon, the search bar pops up but cannot be closed.  

Merhoki.com

Thanks in advance.

[akshay_bhatt]

Hi @avk9641 ,

To address both issues you're experiencing with the search icon and the search bar, here's a solution:

1. Search Icon Size

The issue with the search icon being larger than the others can likely be fixed by adjusting its CSS. Here's a CSS snippet to equalize the size of the icons in the header:

/* Adjust search icon size */
.header .search-icon {
    font-size: 20px; /* Adjust size to match other icons */
}

/* If the search icon uses an image, set its size */
.header .search-icon img {
    width: 20px; /* Adjust width */
    height: 20px; /* Adjust height */
}

Make sure to tweak the font-size or width / height values until the icons match in size.

2. Search Bar Not Closing

The search bar likely isn't closing because the event handler for closing it is either missing or malfunctioning. To ensure the search bar closes when you click outside or on a close button, you can add or adjust the following Javascript:

// Close search bar when clicking outside
document.addEventListener('click', function(event) {
    var searchBar = document.querySelector('.search-bar');
    var searchIcon = document.querySelector('.search-icon');
    
    // Check if the click is outside the search bar or search icon
    if (!searchBar.contains(event.target) && !searchIcon.contains(event.target)) {
        searchBar.classList.remove('open'); // Assuming 'open' is the class that shows the search bar
    }
});

// Toggle search bar visibility when clicking the search icon
document.querySelector('.search-icon').addEventListener('click', function() {
    var searchBar = document.querySelector('.search-bar');
    searchBar.classList.toggle('open');
});

This will make sure the search bar can be toggled open/closed and will close when clicking outside of it. If you have a close button inside the search bar, ensure that it's triggering the same action:

document.querySelector('.close-search').addEventListener('click', function() {
    document.querySelector('.search-bar').classList.remove('open');
});

 You can adjust the class names (.search-bar, .search-icon, .close-search) to match those used in your theme.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[rajweb]

Hey @avk9641 ,

 1. Fix Icon Size:

In your CSS, set a consistent size for all header icons:

.svg-wrapper > svg {
    height: 50%;
    width: 100%;
}

Result:

2 Add JavaScript to Close Search Bar:

Add a simple script to toggle the search bar visibility. Ensure the search button opens it, and the reset button closes it.

const searchButton = document.querySelector('.search__button');
const resetButton = document.querySelector('.reset__button');
const searchBar = document.querySelector('.search__input');

searchButton.addEventListener('click', () => {
  searchBar.classList.toggle('visible');
});

resetButton.addEventListener('click', () => {
  searchBar.classList.remove('visible');
});

In your CSS, define the visible class to control the display of the search bar:

.search__input {
  display: none;
}

.search__input.visible {
  display: block;
}

This solution keeps the icon sizes uniform and allows the search bar to be closed properly.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[rajweb]

Hey @avk9641 , please give this a try and let me know how it works for you!