Menu search bar changes

Also, is there a way to have the button have a magnifier instead of saying the word search?

Hi there,

Firstly, please add these javascript code using TC javascript plugin:

var mainNav = jQuery('#mainnav');
var navSearch = mainNav.find('form.search-form');

navSearch.find('input.search-submit').remove();
navSearch.append('<button type="submit" class="search-submit btn-nav-search"><i class="fa fa-search"></i></button>');

Then add this CSS code into: Customize > additional CSS.

form.search-form input[type="search"] {
    width: 200px;
    height: 31px;
    font-size: 14px;
}
form.search-form .btn-nav-search{
    top: -0.7px;
    border-radius: 0;
    left: -4px;
    padding: 3px 10px;
}

Hope it helps.

Hello there,

Please try adding the below extra CSS code to Appearance > Customize > Additional CSS from dashboard.

.astm-search-menu .search-form label {
  display: inline;
}

.astm-search-menu .search-form label input {
  width: 120px; 
  height: 35px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 20px;
}  

.astm-search-menu .search-form input[type="submit"] {
  height: 34px;
  padding: 5px 10px;
}

You would do some adjustments necessarily.

Regards,
Kharis

@kharisblank

Thank you!
That worked out great. ??

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello Kharis,

Thank you for your help. I used a lot of your codes in order to customize my site.
I followed every step and put the search box to header. But i want to position it right of the navigation bar. But i cannot position it. I tried messing with padding or width but no luck. So if you can help me out it would be much appreciated.

Here is my website. https://www.bascihukuk.com/

Hello @berkay28,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

#mainnav .top-search-menu {
   float: right;
} 

Regards,
Kharis

Kharis, thank you for your answer. I added the code and it worked fine. But it also pushed the navigation bar to the left. So is there any way that i keep the navigation bar at same place and have the search icon right side of it.

Thanks in advance,

These are the css codes i use for search bar. I compiled them from different forums in order to customize it ??

.top-search-menu .search-submit{
display: inline;
}

.top-search-menu label{
position: relative;
}

.top-search-menu label:before{
font-family: FontAwesome;
content: ‘\f002’;
display: inline-block;
display: block;
width: 10px;
height: 26px;
position: absolute;
top: 3px;
left: 0;
padding: 0 5px;
}

.top-search-menu .search-field{
height: 30px;
padding: 3px 5px 3px 26px;
font-weight: normal;
}

.top-search-menu label:before{
color: #fff;
}

.top-search-menu.input-expanded label:before{
color: #115b3b;
}

.top-search-menu input{
opacity: 0;
width: 0;
}

.top-search-menu.input-expanded input{
opacity: 1;
width: 150px;
}

li.top-search-menu {
top: 7px;
}

input.search-submit {
width: auto !important;
height: auto !important;
padding: 2.5px !important;
}

#mainnav .top-search-menu {
float: right;
}

Hello there,

Please try adding this extra custom CSS code:

@media only screen and (min-width: 1025px) {
  #mainnav li.astm-search-menu {
    margin-right: -40px;
  }
}

Let me know how it goes.

Regards,
Kharis

Thank you for your answer.

Regards,
Berkay

You’re welcome Berkay!