Menu search in topbar

[kstidham]

Is there anyway to use the search option available for the menu in the topbar if I am using Pro? I really like the way it works and would like to use it in the topbar. I do not want to use the typical search feature with an input field.

Please tell me this can be done. Thanks.

[Prasant]

Hello Keith,

Thanks for writing in!

I think you are referring to the search function that’s there in our demo pages like Integrity. Please correct me if I am wrong. If you are using Header builder that you can use Search Model or Search Dropdown element.

In case you are not using Header builder then please take a look at solution share in following thread which will require some custom development work. Please note that providing support for the same falls outside the scope of Support we can offer.

Add search function to topbar

Thanks.

[kstidham]

I followed the instruction from the thread above to a tee…twice. All it did was knock out my navbar and my topbar. It seemed like as soon as I replaced the framework directory in the child theme directory, the navbar/topbar disappeared. I can make this work if I have the correct instructions. Your assistance is greatly appreciated. Thank you.

[jade]

Hey Keith,

Since you are using Pro, are you using the header builder? If you are trying to add the search feature to the header builder, you can add a Content Area element in the bar then add this code to the element:

<a href="#" class="x-btn-navbar-search" style="outline: none;"><span><i class="x-icon-search" data-x-icon-s="&#xf002;" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a>
<div class="x-searchform-overlay">
    <div class="x-searchform-overlay-inner">
        <div class="x-container max width">
        <form method="get" id="searchform" class="form-search center-text" action="/">
            <label for="s" class="cfc-h-tx tt-upper">Type and Press &ldquo;enter&rdquo; to Search</label>
            <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
        </form>
        </div>
    </div>
</div>

Hope this helps.