XF 2.1 Place a search bar in the header

djbaxter

Well-known member
Not sure how to do this:

Forum uses a custom style which does have the usual search link in the navigation bar.

Owner wants to turn this into or add a WordPress style search bar located in the header to make it more prominent:

search bar into header.png

How would I go about doing this?
 

djbaxter

Well-known member
Figured it out, or at least one way.

I used the advertising position "Container header" (" Position in the header, opposite the logo block.") and this HTML (hacked from a widget - could be cleaned up a bit):

HTML:
<div class="block" style="width: 400px;">
    <br />
    <div class="block-container" style="background-color: #7DC2EB;">
        <div>
    <form action="{{ link('search/search') }}" method="post" class="menu-content" data-xf-init="quick-search">
        <!--[XF:search_menu:above_input]-->
        <div class="menu-row" style="background-color: #7DC2EB;">
            <xf:if is="$searchConstraints">
                <div class="inputGroup inputGroup--joined">
                    <xf:textbox name="keywords"
                        placeholder="{{ phrase('search...') }}"
                        aria-label="{{ phrase('search') }}"
                        data-menu-autofocus="true" />
                    <xf:select name="constraints"
                        class="js-quickSearch-constraint"
                        aria-label="{{ phrase('search_within') }}">

                        <xf:option value="">{{ phrase('everywhere') }}</xf:option>
                        <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
                            <xf:option value="{$constraint|json}">{$constraintName}</xf:option>
                        </xf:foreach>
                    </xf:select>
                </div>
            <xf:else />
                <xf:textbox name="keywords"
                    placeholder="{{ phrase('search...') }}"
                    aria-label="{{ phrase('search') }}"
                    data-menu-autofocus="true" />
            </xf:if>
        </div>

        <xf:csrf />
    </form>
    </div>
    </div>
</div>

Search bar in header.png
 
Last edited:
Top