Magento 2 – How to Move Search Box Next to Logo

headermagento2

I'm using Magento 2 and trying to change the header part of the theme. I want the search box next to the logo Title "Electro store" as shown in image also i want to know how to change the css of search box and add a submit button by removing search icon and advance search link.

"Electro Store" Title is CMS Static Block which i've created in admin panel and used below code in /var/www/html/magento226/vendor/magento/module-theme/view/frontend/templates/html/header/logo.phtml,

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('Electro-Title')->toHtml();?>

Below code is showing me search box in header links(next to register and login links),

<move element="top.search" destination="header.panel" before="-"/>

I tried to add float:left; css to block-search class in styles-l.less file,as suggested in this forum Move Search Bar but that's not working. Everytime i run this command php bin/magento cache:flush in terminal it removes the changes in file.

Let me know if anyone have solution or query about question.

Best Answer

You have done it right but add your own css for any customiztion of css otherwise it will gone when you update your magento or theme.

You can add your css by this link

Thank you

Related Solutions

Magento – How to move logo and search into header in RWD theme

Go to your template dir and copy/past the following dirs+file:

page/html/header.phtml

On line 45 you will see the anchor tag that contains the logo. You can move this element to whatever you want in this template file.

Magento – Magento 2.0.x – Insert block in to the product page

(1) first create a new module with a custom eav for your product content (this is just the InstallData.php content):

<?php namespace <vendor>\<module_name>\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;


/**
 * @codeCoverageIgnore
 */
class InstallData implements InstallDataInterface
{
    /**
     * EAV setup factory
     *
     * @var EavSetupFactory
     */
    private $eavSetupFactory;

    /**
     * Init
     *
     * @param EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
        /* assign object to class global variable for use in other class methods */
    }

    /**
     * {@inheritdoc}
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $setup->startSetup();
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        /**
         * Add attributes to the eav/attribute
         */
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'my_attribute',
            [
                'type' => 'text',
                'backend' => '',
                'frontend' => '',
                'label' => 'my custom content',
                'input' => 'textarea',
                'class' => '',
                'source' => '',
                'global' => 1,
                'visible' => true,
                'required' => false,
                'user_defined' => true,
                'default' => 0,
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => true,
                'wysiwyg_enabled' => true, // if you want a wysiwyg editor
                'unique' => false,
                'apply_to' => 'simple,configurable,virtual,bundle,downloadable,grouped',
                'group' => 'General'
            ]
        );
        $setup->endSetup();
    }
}

(2) in the module extend catalog_product_view.xml to insert your attribute: [I added mine as a new product tab]

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View\Description" name="{SOME_NAME}" template="product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getMyAttribute</argument>
            <argument name="at_code" xsi:type="string">my_attribute</argument>
            <argument name="css_class" xsi:type="string">{some class if you like}</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">My tab label</argument>
        </arguments>
    </block>
</referenceBlock>

(3) now you can go to your magento admin and insert custom content (even html) into the attribute content like for every other attribute

Related Topic