How do I add a search-box in a CMS Static Block, in Magento 2?

Question

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

I want to display the search bar above the top links, at the right of the logo:

Not being able to do that by editing the theme's default.xml file, I have created a CMS Static Block ("Search") and placed it within a widget in the website's header.

How do I add the search box in this block?

Answer 1

Try below code to achieve your functionality using default.xml file inside theme

<!-- Main Header -->
  <container name="header.main" htmlTag="header" htmlClass="header-main">
    <container name="header.main.container" htmlTag="div" htmlClass="container">
      <container name="header.main.row" htmlTag="div" htmlClass="row vcenter">
        <container name="header.main.logo" htmlTag="div" htmlClass="col-md-6 col-sm-6 col-xs-10 header-logo">
          <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
              <argument name="logo_img_width" xsi:type="number">499</argument>
              <argument name="logo_img_height" xsi:type="number">57</argument>
            </arguments>
          </block>
        </container>
        <container name="header.main.search" htmlTag="div" htmlClass="col-md-3 col-sm-3 header-search hidden-xs" after="-">
          <block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
        </container>
        <container name="header.toplinks" htmlClass="col-md-3 col-sm-3 header-links hidden-xs" after="-"></container>
      </container>
    </container>
  </container>
<!-- End Main Header -->
<move element="top.links" destination="header.toplinks"/>

Note: Change your container classes and logo size according to your requirement.

Answer 2

I added the following code sequence in my custom theme's default.xml file:

<container name="header.main.search" htmlTag="div" htmlClass="header-search" after="-">
<block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
</container>
<move element="header.main.search" destination="header-wrapper" after="logo" />
<move element="top.links" destination="header-wrapper" after="header.main.search" />

The code above renders the following HTML in the page source:

<div class="header content">
  <strong class="logo">
   <img src="https://dev3.pro-detailing.ro/pub/static/version1516374892/frontend/ProDetailing/v1/en_US/images/logo.png" alt="Magento Commerce" width="263" height="85">
  </strong>
  <div class="header-search">
    <form class="navbar-form navbar-right" role="search" id="search_mini_form" action="https://dev3.pro-detailing.ro/catalogsearch/result/" method="get">
      <div class="form-group">
        <input type="text" name="q" value="" placeholder="Search entire store here..." class="form-control" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
      </div>
      <button type="submit" class="btn btn-default" disabled="">Search</button>
      <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    </form>
  </div>
  <ul class="list-inline clearfix header links">
    <li><a href="https://dev3.pro-detailing.ro/customer/account/">My Account</a></li>
    <li class="authorization-link" data-label="or">
      <a href="https://dev3.pro-detailing.ro/customer/account/login/">
      Sign In</a>
    </li>
  </ul>
</div>

This is what I was looking for.