Add the ajax search in Top Menu or make Top Menu secondary?

This topic has 7 replies, 3 voices, and was last updated 7 years by Radu.

Author

Tagged: search, top menu
February 14, 2017 at 23:24 #153081

cd690767
Participant

Hi,

I would like to add a search bar to the kleo Top Menu. I’ve found a place to place the ajax search in the primary or secondary menu, but I can’t find a way to either assign the TopMenu as the secondary menu or just add the search form to the TopMenu without making it secondary. I also can’t figure out how to use the shortcode to add the search to the TopMenu.

Any help would be appreciated.

Thanks,

Cathy

February 16, 2017 at 03:28 #153170

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

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 🙂
February 20, 2017 at 17:22 #153532

Radu
Moderator
Hi,

You can do that using this function
COPY CODE
```
if ( ! function_exists( 'kleo_search_menu_item' ) ) {
    /**
     * Add search to menu
     *
     * @param string $items
     * @param object $args
     *
     * @return string
     */
    function kleo_search_menu_item( $items, $args ) {
        if ( sq_option( 'ajax_search', 1 ) == 'logged_in' && ! is_user_logged_in() ) {
            return $items;
        }

        $location = sq_option( 'menu_search_location', 'primary' );

        if ( $args->theme_location == 'top' ) {
            $form = kleo_get_search_menu_item();
            $items .= '<li id="nav-menu-item-search" class="menu-item kleo-search-nav">' . $form . '</li>';
        }

        return $items;
    }
}
```
And this CSS
COPY CODE
```
@media(max-width:991px){
    .top-menu  #ajax_search_container {padding:0 10px;}
}
```
The function needs to be pasted in wp-content/themes/kleo-child/functions.php

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

NOTE : Child theme needs to be installed and activated.

Cheers
R.

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

What support service includes ? What not ?
February 20, 2017 at 17:24 #153533

Radu
Moderator

In future we will implement this directly in theme and use the next function selecting from theme options position for search will not function, in future, the top position will be selectable from theme options

Cheers
r.

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

What support service includes ? What not ?

February 21, 2017 at 03:08 #153643

cd690767
Participant

Hi Radu,

Thanks so much for your help-it looks great! The only tweak I need is that the search icon shows up on the right end and the box pops up in the middle- can I change the location of where the search box pops up?

Thanks again,

Cathy

February 21, 2017 at 18:13 #153716

Radu
Moderator

Hi,

No, there no quick solution for that right now

Cheers
R.

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

What support service includes ? What not ?

February 21, 2017 at 22:12 #153756

cd690767
Participant

Ok, thanks for the help with this.

Cathy

February 22, 2017 at 14:33 #153877

Radu
Moderator

You’re welcome

Cheers
R.

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

What support service includes ? What not ?
Author

Posts