I'm using Magento 2, and what I'm trying to do is to duplicate the search form, one for the desktop version and one for mobile, hiding one and another on different versions.

The problem is that on mobile, when I click the search icon, the window doesn't show up, cause it calls the desktop version, and that one is hidden.

I've duplicated already the .phtml file, and tried to solve this, but no success, any idea?

1 Answer 1


you have to just call different file for each mobile and desktop search box functionlity,

add inside default.xml file,,

<block class="Magento\Framework\View\Element\Template" name="top.search.mobile" as="topsearchmobile" template="Magento_Search::form.mini-mobile.phtml" />

Inside your theme topmenu.phtml file,


Add line before </nav>, <?php echo $this->getLayout()->getBlock('top.search.mobile')->toHtml(); ?>

Override form.mini.phtml file from core folder to your theme,

 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.

// @codingStandardsIgnoreFile
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
$helper = $this->helper('Magento\Search\Helper\Data');
<div class="block block-search">
    <div class="block block-content">
        <form class="form minisearch" id="search_mini_form-mobile" action="<?php /* @escapeNotVerified */ echo $helper->getResultUrl() ?>" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                <div class="control">
                    <input id="search"
                                "url":"<?php /* @escapeNotVerified */ echo $block->getUrl('search/ajax/suggest'); ?>",
                           name="<?php /* @escapeNotVerified */ echo $helper->getQueryParamName() ?>"
                           value="<?php /* @escapeNotVerified */ echo $helper->getEscapedQueryText() ?>"
                           placeholder="<?php /* @escapeNotVerified */ echo __('Search here...'); ?>"
                           maxlength="<?php /* @escapeNotVerified */ echo $helper->getMaxQueryLength();?>"
                    <div id="search_autocomplete-mobile" class="search-autocomplete"></div>
                    <?php echo $block->getChildHtml() ?>
            <div class="actions">
                <button type="submit"
                        title="<?php echo $block->escapeHtml(__('Search')) ?>"
                        class="action search">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>

Deploy content and check for your both version.

You have keep your form id differnt from core file. i have changed form id with our own id.

  • Thats safe my day. Thank you Rakesh. I copy the search form for a sticky header.
    – NoBody
    Nov 13, 2017 at 10:28
  • There is problem with this I am facing it works fine but 1- the search input isn't disabled, 2- and if you type "anything" and hit enter on key board "Not the search icon!" it returns Uncaught TypeError: Cannot read property 'preventDefault' of undefined at $.(anonymous function).(anonymous function)._onSubmit in form-mini.js Do you have any idea how to fix this? Dec 13, 2017 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.