Search widget in menubar

Can you give me any pointers on how I might go about adding a search widget in the simplicity menu bar?

Thanks

Ken

Hi,
Try to use a 3rd party plugin, i.e:
https://wordpress.org/plugins/bop-searc ... nav-menus/

That works a treat. Thanks Piotr.

Ken

Sorry to reopen this, but any chance you could take a look at this for me? I'm using the bop-search plug in you suggested and it works really well, does exactly what I want, but there's a problem. It doesn't display well with the mobile burger menu so I've made some changes to the CSS and it looks fine, but doesn't function. You can enter text in the search field, but the submit button isn't functioning and pressing Return doesn't work either. I'd direct this to the plug-in developer, but I think this is an issue with template CSS (which, admittedly, I've amended). Let me know if you're ok to take a look and I'll PM you the url and login details.

Thanks

Ken

Ok, i'll take a look, please send me a PM with your website backend access.

Try to add the following css code at the end of your tablet.css file:

Code: Select all

#main-menu {
   display: block;
}

#main-menu > li,
#main-menu-mobile .search-field,
#main-menu-mobile input.search-submit {
   display: none;
}

#main-menu > .bop-nav-search {
   display: block;
}


That does nothing in my tablet.css, but I've got some override.css that may be intererfering. When I add it to the relevant section in my override.css the search disappears altogether (see below). I don't want to get rid of it, I just need it functioning.

Cheers

Code: Select all

/************ tablet  overrides ************/ 

   /************ Header ************/
   
   @media (min-width: 801px) and (max-width: 1030px) {
   
 .imageBg #gk-head, .imageBg.frontpage #gk-head-frontpage {
     background-image: url('http://porthtowan.coolgrey.co.uk/wp-content/themes/Simplicity/images/header_tablet.jpg')!important;
}


#main-menu {
   display: block;
}

#main-menu > li,
#main-menu-mobile .search-field,
#main-menu-mobile input.search-submit {
   display: none;
}

}

Please remove the code from override.css file and try to put it at the end of tablet.css file (i've checked it via Google Dev Tools and it works).

You can also use this code to add the search form in your layouts/header.php file:
https://codex.wordpress.org/Function_Re ... earch_form

Thanks for that, working now )
My own stupid fault, I think I missed the last couple of lines of your CSS when I copy/pasted.

Thanks so much for your help.

Ken