Search icon in menu

Hi.
Is there a way to include a search field – a magnifying glass icon – in the menu?
I use the Wpresidence theme.

Thanks,
techy93

Hi @kharisblank,

How could I fix the search icon/search field not appearing in Chrome? It works well in other browsers.

Regards

• This reply was modified 8 years ago by soasmw.

Hello @soasmw,

Please share your site URL here, so I can check and troubleshoot it.

Regards,
Kharis

Hi @kharisblank,
The search icon in menu still works great, however:
when we add more menu items the search field moves down to another line and is difficult to use.
Is there some code that can move the menu more left to avoid this behaviour?

The site is https://hemedine.no/

Thank you,
Thor

@kharisblank
Here you go: https://winnersavenue.com/

• This reply was modified 8 years ago by soasmw.

Yes, you can use the following CSS snippet:

@media only screen and (min-width:1025px) {
  
  .site-header .col-md-4 {
    width: 12%;
  }
  
  .site-header .col-md-8 {
    width: 88%;
  }  
  
}

To apply it on your site, add it into your site’s additional CSS option which resides in the customizer. Or, you can use child theme’s style.css.

Regards,
Kharis

@thauknes
Did you follow exactly the steps suggested by Kharis in the earlier comments? You have a beautiful search icon which expands into the search field upon hovering. All I managed to get was a fixed search field.

@kharisblank Any advice, mate? You have the link to my website.

Thanks

Hello @soasmw,

I visited your site. Both search icon and field are displaying fine on my Chrome as seen on the below screenshot.

Please clear your web browser’s cache and try again. Or, you would need to update to the latest version if you’re running the older one.

Regards,
Kharis

@kharisblank Thank you for the prompt response.

I am however not able to see a search icon that expands into a search field upon hovering. Any idea how I can fix that? I tried different browsers including a mobile browser.

• This reply was modified 8 years ago by soasmw.

@kharisblank – I pasted this code into my child themes style.css and got i to work in Safari, but Chrome still show the old behaviour ( with the search field jumping down one line.)
@media only screen and (min-width:1025px) {

.site-header .col-md-4 {
width: 12%;
}

.site-header .col-md-8 {
width: 88%;
}

}

@soasmw – yes, I followed all steps outlined in this post and uses the code in a child theme.
My problem now is that the authors of the site has put too many menu points in…

@kharisblank
Please forget my last post..
It works in Chrome too – clearing the cache of course!

Thanks again for your prompt response and fantastic help.

Thor

@kharisblank

I realized that I had some problem with Fontawesome. I used a different icon, then changed it again; now it works perfectly.

Thank you so much for your help. I was wondering if you could help me with another tweak. If you see the following screenshots, the search icon appears in the menu (in a mobile device) and is shown only after I click the hamburger icon. Could I make the search icon appear outside of the menu next to the hamburger icon?

Thanks again.

Hello @soasmw,

Great! You figured that out.

> Could I make the search icon appear outside of the menu next to the hamburger icon?

Try adding the following jQuery script into “Scripts in footer” box under Settings > Header and Footer Scripts

<script>
(function($){

    "use strict";

    if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
    
      var sForm = $('.top-search-menu').html();
    
      $('.site-header .col-md-8').prepend('<div class="top-search-menu">'+sForm+'</div>');

    }

})(jQuery);
</script>

Then add the below custom CSS code:

div.top-search-menu {
  width: 30px;
  position: absolute;
  top: 8px;
  right: 50px;
  overflow: hidden;
}

div.top-search-menu label:before {
  font-size: 20px;
  margin-top: -4px;
}

div.top-search-menu .search-field {
  height: 27px;
  outline: none;
}  

div.top-search-menu.input-expanded {
  width: 140px;
}

div.top-search-menu form {
  position: relative;
}

div.top-search-menu form input {
  width: 140px;  
}  

@media only screen and (min-width:1025px) {
  
  div.top-search-menu {
    display: none;
  }
  
}

@media only screen and (max-width:1024px) {
  
  li.top-search-menu{
    height: 0;
    overflow: hidden;
  }
  
}

@media only screen and (max-width:767px) {
  
  div.top-search-menu {
    top: 24px; 
    right: auto;
    left: 15px;
  } 
  
  .btn-menu {
    margin-right: 15px;
  }
  
}

Regards,
Kharis

Thanks for your response, @kharisblank

I tried what you suggested, but could not achieve what I wanted to.

I pasted the javascript code in the footer scripts section of the Header and Footer plugin (after the previous script). Then I pasted the CSS in the “mobile device” section of the Advanced CSS plugin through the customizer.

Is it possible to change the default text in the search field from “Search…” to something else?