How to Adjust the GD Search Bar with CSS

CSS snippet can be added to the WordPress Customizer, found at

WP Admin - Appearance - Customizer - Additional CSS

Target CSS to a specific page

If you only want the CSS change to apply to a search bar on a specific page, you must add some targeting to the code. You must check and get the actual ID of your page and substitute that for '42' in the CSS below. .my-select {display:none !important;}

Hide the Search For Keyword Field

.gd-search-field-search.col-auto.flex-fill {display:none;}

Hide the Near Search Field

/* GDV2 – Hide only the Near search field in all search bars */
.gd-search-field-near.col-auto.flex-fill {display:none !important;}

Hide Location Suggestions in the Near Field

/* GDV2 – Hide only the IN search recommendation */
.geodir-listing-search ul.gdlmls-neighbourhood,
.geodir-listing-search ul.gdlmls-city,
.geodir-listing-search ul.gdlmls-region,
.geodir-listing-search ul.gdlmls-country, 
.geodir-listing-search ul.gdlmls-near {
    display: none !important;

Hide the Category drop down This will need additional targeting to make it apply to a specific page {display:none !important;}

Hide images from the search bar listing suggestions

.gd-suggestions-dropdown .gdasac-icon {

.gd-suggestions-dropdown .list-group-item-action {
     padding-left: 10px!important;

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us