search bar problem!!! Topics related to Realistic theme goes here.

[Sam Shimul]

hello, admin, I am your Realistic theme user. can you tell me how can i make the search bar like this screenshot

Screenshot_6.jpg (16.51 KiB) Viewed 722 times

[Asmi Khalil]

Hello Sam,

Thanks for using Realistic

The title is a bit misleading since the search bar is working fine.

Anyway, the search bar in your screenshot is using predefined Bootstrap CSS classes while Realistic is based on a different framework, so I will provide a similar result, but not 100% identical. Once you apply the codes provided here, your header search bar should become like this:


First, you need to edit header.php file and remove MDL classes from the search bar. So you need to find this code:

hdr_strongselect_all

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width is-upgraded">
        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
            <i class="material-icons">search</i>
        </label>
        <div class="search-form mdl-textfield__expandable-holder">
            <input class="search-field mdl-textfield__input" type="search" id="search-field" name="s" value="">
        </div>
	</div>
</form>

And replace it with this one:

hdr_strongselect_all

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="search-box">
	    <label class="mdl-button" for="search-field">
	        <i class="material-icons">search</i>
	    </label>
	    <div class="search-form">
	        <input class="search-field" type="search" id="search-field" name="s" value="" placeholder="<?php esc_attr_e( 'Search &#8230;', 'realistic' ); ?>">
	    </div>
	</div>
</form>

Then, add this CSS code to your style.css file or add it to the Additional CSS option in the Customizer (Appearance => Customize):

hdr_strongselect_all

.site-header .search-box {
    position: relative;
}
.site-header .search-box .mdl-button {
    position: absolute;
    right: 0;
    background-color: rgba(0, 0, 0, 0.06);
    min-width: 0;
    padding: 0 8px;
    height: 27px;
}
.site-header .search-box .mdl-button .material-icons {
    font-size: 20px;
    vertical-align: text-bottom;
    color: #999;
}
.site-header .search-field {
    border: 1px solid #FFF;
    padding: 6px 10px;
    border-radius: 3px;
    min-width: 180px;
}

[Sam Shimul]

its work but the search bar not responsive

dsfsdfdf.JPG (25.28 KiB) Viewed 708 times

please make it responsive

[Asmi Khalil]

You can add this code to hide the search bar on mobile devices:

hdr_strongselect_all

@media screen and (max-width:480px) {
	.site-header .search-box {
		display: none !important;
	}
}

Or you could create a shorter version of your logo like an icon and display it instead of your current logo when your website viewed on small screen.