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

Sam Shimul

New Member Rank
Posts: 2
Joined: Wed May 23, 2018 8:02 am
Display Name: Sam Shimul

search bar problem!!!

linkPost by sam_shimul » Wed May 23, 2018 8:25 am

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
Screenshot_6.jpg (16.51 KiB) Viewed 618 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: search bar problem!!!

linkPost by admin » Fri May 25, 2018 6:22 am

Hello Sam,

Thanks for using Realistic :D

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:
Image

First, you need to edit header.php file and remove MDL classes from the search bar. So you need to find this code:
<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:
<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):
.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;
}
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
Sam Shimul

New Member Rank
Posts: 2
Joined: Wed May 23, 2018 8:02 am
Display Name: Sam Shimul

Re: search bar problem!!!

linkPost by sam_shimul » Sat May 26, 2018 6:44 pm

its work but the search bar not responsive
dsfsdfdf.JPG
dsfsdfdf.JPG (25.28 KiB) Viewed 604 times
please make it responsive
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: search bar problem!!!

linkPost by admin » Thu May 31, 2018 2:47 am

You can add this code to hide the search bar on mobile devices:
@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.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Wed Apr 24, 2019 8:12 am