3

Here is my current search bar:

enter image description here

And here is my expectation:

enter image description here

I still don't understand about how to make centered search bar like that ?

here is my html (from inspect element):

<header class="page-header"><div class="panel wrapper"><div class="panel header"><a class="action skip contentarea" href="#contentarea"><span>Skip to Content</span></a>
<ul class="header links">        <li class="greet welcome" data-bind="scope: 'customer'">
            <!-- ko if: customer().fullname  --><!-- /ko -->
            <!-- ko ifnot: customer().fullname  -->
            <span class="not-logged-in" data-bind="html:&quot;Default welcome msg!&quot;">Default welcome msg!</span>
                        <!-- /ko -->
        </li>

    <li class="authorization-link" data-label="or">
    <a href="http://senheng.local/customer/account/login/referer/aHR0cDovL3NlbmhlbmcubG9jYWwv/">
        Sign In    </a>
</li>
<li><a href="http://senheng.local/customer/account/create/">Create an Account</a></li></ul></div></div><div class="header content"><span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
<a class="logo" href="http://senheng.local/" title="">
    <img src="http://senheng.local/static/version1557390609/frontend/Senheng/default/id_ID/images/senheng.png" title="" alt="" width="300" height="300">
</a>
<div class="block block-search">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        <form class="form minisearch" id="search_mini_form" action="http://senheng.local/catalogsearch/result/" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span>Search</span>
                </label>
                <div class="control">
                    <input id="search" type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
                    <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                    <div class="nested">
    <a class="action advanced" href="http://senheng.local/catalogsearch/advanced/" data-action="advanced-search">
        Advanced Search    </a>
</div>
                </div>
            </div>
            <div class="actions">
                <button type="submit" title="Search" class="action search" disabled="">
                    <span>Search</span>
                </button>
            </div>
        </form>
    </div>
</div>
<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    <a class="action compare no-display" title="Compare Products" data-bind="attr: {'href': compareProducts().listUrl}, css: {'no-display': !compareProducts().count}">
        Compare Products        <span class="counter qty" data-bind="text: compareProducts().countCaption"></span>
    </a>
</li>

</ul></div></header>

any help would be really appreciated.

  • you can adjust on your custom css – fmsthird May 10 at 3:22
  • I will try that, any suggestion for the css ? – Yusuf Ibrahim May 10 at 3:24
  • you can play with the block-search css class – fmsthird May 10 at 3:36
  • okay, will try that, BTW, I am new in Magento, does it mean that I need to setup my Grunt file for custom css ? – Yusuf Ibrahim May 10 at 3:47
1

In your Custom/Theme/Magento_Theme/layout/default.xml

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

You can move header search bar using below xml element,

app\design\frontend\YourVendor\YourCustomTheme\Magento_Theme\layout\default.xml

<move element="top.search" destination="where you want to move" />

As per your current search my suggestion is that you can manage it via CSS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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