Search in Top Menu

Hi All,

I’m trying to put a search icon that opens up to search field on my website in the header area.

I found the following post but this added a big search field and a search button.

Please check my website http://www.morabitobaking.com/ and advise

Thank You,
Owais

I was able to achieve what I want by pasting the code in custom css instead of child themes css.

That brings me to another questions, why wont the code work when i put it in Child themes css. and this is not the only code the other codes also wont work. What do i need to do.

Thank You,
Owais

Hello Owais,

Please describe how exactly you add the CSS code to your child theme. Also please make sure that your child theme is activated, not parent theme.

Kind Regards, Roman.

Hi Roman,

I added the css in the child themes Style.css and yes child theme is the active theme.

This is my current style.css from the child theme

/*
Theme Name: Sydney Pro Child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney-pro-ii
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/

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

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

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

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

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

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

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

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

I had to add the same code in custom css for it to work

Also, The search icon is not inline with rest of the menu items. Its lower then them. I inspected the element but cant figure out how to fix it.

Thank You,
Owais

Hello Owais,

  1. It looks like your CSS issue requires close inspection, this goes beyond our support policy.

  2. I’m not sure why your search menu item is not aligned, but please try to add this CSS rule in order to align it:

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

However, please note that the code above is a workaround. It fixes the consequence, not the cause.

Kind Regards, Roman.

Hi Roman,

  1. Its okay, Placing code in custom css get the job done, so no big deal.

  2. The above code did the trick. Thank you

Owais

You are welcome Owais,

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.