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 class="authorization-link" data-label="or">
    <a href="http://senheng.local/customer/account/login/referer/aHR0cDovL3NlbmhlbmcubG9jYWwv/">
        Sign In    </a>
<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">
<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">
                <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 class="actions">
                <button type="submit" title="Search" class="action search" disabled="">
<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>


any help would be really appreciated.

  • you can adjust on your custom css
    – fmsthird
    May 10, 2019 at 3:22
  • I will try that, any suggestion for the css ? May 10, 2019 at 3:24
  • you can play with the block-search css class
    – fmsthird
    May 10, 2019 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 ? May 10, 2019 at 3:47

2 Answers 2


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

<move element="top.search" destination="header.panel" before="minicart" />
  • How to change the small lens icon inside in search box from right to left?
    – zus
    Dec 6, 2020 at 12:32

You can move header search bar using below xml element,


<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 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.