[Re] Search bar in main menu

[ahd904]

I have requested this before but i still have not found a way to form this.

What i want is the KLEO ajax search bar to be appearing like the image ‘facebook-sample’ attached.

I read some information as below and this will show a header-search bar in the main menu,

COPY CODE

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

 function add_search_form($items, $args) {
          if( $args->theme_location == 'CHANGE-THIS-TO-YOUR-MENU-NAME' )
          $items .= '<li class="search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. __('Search') .'" /></form></li>';
     return $items;
}

Is there a way to make this happen by changing the form id and etc in this section?

<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" />

I was also wondering if i could make the ajax search bar given by Kleo theme to be shown like that
and below are the information @sharmstr has provided me but it seems little bit difficult to find out the correct CSS or even if it is possible to make it look like a simple facebook search bar style appearing as ‘open’ status beside the logo.

Could you please give more hands for this one ?

my website link is http://www.ibyi.co.kr , you can please refer to this.

Currently i only have applied float: left to make it move to the first of the main menu navigation.

Thank you for the support.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, use this css in style.css in child theme

COPY CODE

.kleo-main-header.header-normal {
position: fixed;
top: -9px;
}
.navbar-header {
height: 21.5px;
line-height: 21.5px;
margin-top: 1%;
}
#ajax_search_container:before {
position: absolute;
display: none;
}

ajax_s.form-control {
opacity: 1;
height: 25px;
}
search-trigger i {
margin-left: 80%;
top: 10px;
position: relative;
}
.collapse.navbar-collapse.nav-collapse ul li {
margin-top: 2%;
}
#ajax_search_container {
left: -50px !important;
}
.searchHidden {
display: block;
background-color: transparent !important;
border: none !important;
margin-top: -30%;
margin-left: -110px;
z-index: 3 !important;
transition: all .3s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out 0s;
position: relative !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[cbenech]

Hi,

I tried the code you’ve posted Laura. It works, however, do you have a solution to make it responsive ? Because when the size of the windows change, the search bar doesn’t adapt correctly to the new size of the screen.

Thanks

[Laura]

Hello, i am not able to see your website, let me know once i can 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ahd904]

Please also let me know of this once the solution has been found.

I also had problem that the search bar size was not reponsive and getting out of its box when the window resizes.

Thank you Laura.

[lillyleitz]

Hi,

I would also like to add a search bar in header section. Where do I need to add the code that ahd904 has given?
Thanks

[Laura]

Hello, please create a new topic so i can check it out separately 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts