1

The search bar appears in the mobile version when you press the magnifying glass. I wish the search bar could move under the logo and be active all the time. Can anyone guide me?

I use Magento 2.3.3 with Codazon Infinit theme.

What is currently there (you need to click the search icon to make the search bar appear)

Laurentiu B
  • 13
  • 4

1 Answers1

0

in vendor\magento\module-search\view\frontend\web\js\form-mini.js you have function setActiveState in which you have: 

this.searchForm.toggleClass('active', isActive);
this.searchLabel.toggleClass('active', isActive);

which add class to the label and form. If class and form has class active they are shown. You have to override this function

EDIT:
How to override Js file:
create custom module under /app/code/[Vendor]/[Module]. Our Vendor name will be Override and module name Js. So first create file registration.php in app/code/Override/Js
app/code/Override/Js/registration.php 

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Override_Js',
    __DIR__
);

Then under app/code/Override/Js/etc create file module.xml.
app/code/Override/Js/etc/module.xml 

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Override_Js" setup_version="0.0.1">

    </module>
</config>

Next step is to create file requirejs-config.js
app/code/Override/Js/view/frontend/requirejs-config.js 

var config = {
    map: {
        '*': {
            'Magento_Search/js/form-mini':'Override_Js/js/form-mini'
            }
        }
    };

Last thing to do is to creat your Js file. So create :
app/code/Override/Js/view/frontend/web/js/form-mini.js
with content from:
vendor\magento\module-search\view\frontend\web\js\form-mini.js and make any changes you want.
After this run: 

php bin/magento module:enable Override_Js
php bin/magento setup:upgrade   
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:di:compile

TIP: first put some alert('test'); in the _create: function () { to see if requirejs works. If not follow this link

SebastianT
  • 716
  • 3
  • 14