hello, admin, I am your Realistic theme user. can you tell me how can i make the search bar like this screenshot
search bar problem!!!
Topics related to Realistic theme goes here.
-
-
- Posts: 2
- Joined: Wed May 23, 2018 8:02 am
- Display Name: Sam Shimul
- Asmi Khalil
-
- Posts: 781
- Joined: Fri Jun 26, 2015 7:13 am
- Display Name: Asmi Khalil
- Location: Tunisia
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:
And replace it with this one:
Then, add this CSS code to your style.css file or add it to the Additional CSS option in the Customizer (Appearance => Customize):
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:
<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>
<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 …', 'realistic' ); ?>">
</div>
</div>
</form>
.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
-
-
- Posts: 2
- Joined: Wed May 23, 2018 8:02 am
- Display Name: Sam Shimul
its work but the search bar not responsive
please make it responsive- Asmi Khalil
-
- Posts: 781
- Joined: Fri Jun 26, 2015 7:13 am
- Display Name: Asmi Khalil
- Location: Tunisia
You can add this code to hide the search bar on mobile devices:
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.
@media screen and (max-width:480px) {
.site-header .search-box {
display: none !important;
}
}
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 0 guests
It is currently Wed Dec 11, 2019 10:56 pm