Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Center searchbar in header – Woocommerce

I’m trying to center the search bar in the middle of the header in my WordPress website.
However, since I’m using a ready-made theme (Flatsome), the classes has already been made which make it more difficult to customize.

The problem is that the elements of the header use the same classes, which mean if i target one element another part get affected as well.

The website is here: toolstrading.se

I have been working with this code below.

.nav-uppercase {
    text-align: center;
    float: none;
    display: inline-block;
    margin-left: -30px;  
}

As you can see, the elements on the right get affected by the CSS change

Appreciate all help I can get, since I’m getting crazy by this.

Thank you!

Edit

Here is the whole header block.

<header id="header" class="header has-sticky sticky-jump">
        <div class="header-wrapper">
            <div id="masthead" class="header-main nav-dark">
      <div class="header-inner flex-row container logo-left medium-logo-center" role="navigation">

          <!-- Logo -->
          <div id="logo" class="flex-col logo">
            <!-- Header logo -->
<a href="https://toolstrading.se/" title="Scandinavian Tools - Din helhetsleverantör av verktyg" rel="home">
    <img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header_logo header-logo" alt="Scandinavian Tools"><img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header-logo-dark" alt="Scandinavian Tools"></a>
          </div>

          <!-- Mobile Left Elements -->
          <div class="flex-col show-for-medium flex-left">
            <ul class="mobile-nav nav nav-left ">
              <li class="nav-icon has-icon">
        <a href="#" data-open="#main-menu" data-pos="right" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
        
          <i class="icon-menu"></i>
                </a>
    </li>            </ul>
          </div>

          <!-- Left Elements -->
          <div class="flex-col hide-for-medium flex-left
            flex-grow">
            <ul class="header-nav header-nav-main nav nav-left  nav-uppercase">
              <li class="header-search-form search-form html relative has-icon">
    <div class="header-search-form-wrapper">
        <div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
    <div class="flex-row relative">
                        <div class="flex-col flex-grow">
            <label class="screen-reader-text" for="woocommerce-product-search-field-0">Sök efter:</label>
            <input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
            <input type="hidden" name="post_type" value="product">
                    </div>
        <div class="flex-col">
            <button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
                <i class="icon-search"></i>         </button>
        </div>
    </div>
    <div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div>  </div>
</li>            </ul>
          </div>

          <!-- Right Elements -->
          <div class="flex-col hide-for-medium flex-right">
            <ul class="header-nav header-nav-main nav nav-right  nav-uppercase">
              <li class="account-item has-icon
     has-dropdown">

<a href="https://toolstrading.se/my-account/" class="account-link account-login
  " title="Mitt konto">

            <span class="header-account-title">
        Admin       </span>
    
  
</a>



<ul class="nav-dropdown  nav-dropdown-default">
    
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
          <a href="https://toolstrading.se/my-account/">Kontopanel</a>
      <!-- empty -->
        </li>
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
          <a href="https://toolstrading.se/my-account/orders/">Beställningar</a>
        </li>
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
          <a href="https://toolstrading.se/my-account/downloads/">Nedladdningar</a>
        </li>
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
          <a href="https://toolstrading.se/my-account/edit-address/">Adresser</a>
        </li>
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
          <a href="https://toolstrading.se/my-account/edit-account/">Kontouppgifter</a>
        </li>
      <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
    <a href="https://toolstrading.se/my-account/customer-logout/">Logga ut</a>
  </li>
</ul>

</li>
<li class="header-divider"></li><li class="cart-item has-icon has-dropdown">

<a href="https://toolstrading.se/cart/" title="Varukorg" class="header-cart-link is-small">


<span class="header-cart-title">
           <span class="cart-price"><span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>
  </span>

            <span class="cart-icon image-icon">
            <strong>1</strong>
        </span>
        
  </a>

 <ul class="nav-dropdown nav-dropdown-default">
    <li class="html widget_shopping_cart">
      <div class="widget_shopping_cart_content">

    <ul class="woocommerce-mini-cart cart_list product_list_widget ">
                        <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&amp;_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a>                                         <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
                            <img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6                       </a>
                                                            <span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>             </li>
                    </ul>

    <p class="woocommerce-mini-cart__total total">
        <strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span>    </p>

    
    <p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>

    

</div>
    </li>
     </ul>

</li>
            </ul>
          </div>

          <!-- Mobile Right Elements -->
          <div class="flex-col show-for-medium flex-right">
            <ul class="mobile-nav nav nav-right ">
              <li class="cart-item has-icon">

      <a href="https://toolstrading.se/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Varukorg" data-pos="right">
  
            <span class="cart-icon image-icon">
            <strong>1</strong>
        </span>
        
  </a>


  <!-- Cart Sidebar Popup -->
  <div id="cart-popup" class="mfp-hide widget_shopping_cart">
  <div class="cart-popup-inner inner-padding">
      <div class="cart-popup-title text-center">
          <h4 class="uppercase">Varukorg</h4>
          <div class="is-divider"></div>
      </div>
      <div class="widget_shopping_cart_content">

    <ul class="woocommerce-mini-cart cart_list product_list_widget ">
                        <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&amp;_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a>                                         <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
                            <img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6                       </a>
                                                            <span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>             </li>
                    </ul>

    <p class="woocommerce-mini-cart__total total">
        <strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span>    </p>

    
    <p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>

    

</div>
             <div class="cart-sidebar-content relative"></div>  </div>
  </div>

</li>
            </ul>
          </div>

      </div>
     
            <div class="container"><div class="top-divider full-width"></div></div>
      </div><div id="wide-nav" class="header-bottom wide-nav nav-dark flex-has-center">
    <div class="flex-row container">

                        <div class="flex-col hide-for-medium flex-left">
                <ul class="nav header-nav header-bottom-nav nav-left  nav-size-medium nav-spacing-xlarge">
                    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-30 active menu-item-design-default"><a href="https://toolstrading.se/" aria-current="page" class="nav-top-link">Hem</a></li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 menu-item-design-default"><a href="https://toolstrading.se/webbshop/" class="nav-top-link">Webbshop</a></li>
<li id="menu-item-48410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48410 menu-item-design-default"><a href="https://toolstrading.se/erbjudanden/" class="nav-top-link">Erbjudanden</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64 menu-item-design-default"><a href="https://toolstrading.se/leasing/" class="nav-top-link">Leasing</a></li>
                </ul>
            </div>
            
                        <div class="flex-col hide-for-medium flex-center">
                <ul class="nav header-nav header-bottom-nav nav-center  nav-size-medium nav-spacing-xlarge">
                                    </ul>
            </div>
            
                        <div class="flex-col hide-for-medium flex-right flex-grow">
              <ul class="nav header-nav header-bottom-nav nav-right  nav-size-medium nav-spacing-xlarge">
                   <li class="html header-button-1">
    <div class="header-button">
    <a href="http://partytent.se" class="button secondary" style="border-radius:99px;">
    <span>Letar du efter tält och tillbehör?</span>
  </a>
    </div>
</li>


              </ul>
            </div>
            
                          <div class="flex-col show-for-medium flex-grow">
                  <ul class="nav header-bottom-nav nav-center mobile-nav  nav-size-medium nav-spacing-xlarge">
                      <li class="header-search-form search-form html relative has-icon">
    <div class="header-search-form-wrapper">
        <div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
    <div class="flex-row relative">
                        <div class="flex-col flex-grow">
            <label class="screen-reader-text" for="woocommerce-product-search-field-1">Sök efter:</label>
            <input type="search" id="woocommerce-product-search-field-1" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
            <input type="hidden" name="post_type" value="product">
                    </div>
        <div class="flex-col">
            <button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
                <i class="icon-search"></i>         </button>
        </div>
    </div>
    <div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div>  </div>
</li>                  </ul>
              </div>
            
    </div>
</div>

<div class="header-bg-container fill"><div class="header-bg-image fill"></div><div class="header-bg-color fill"></div></div>        </div>
    </header>
Tags:

2

Answers


  1. 0

    I checked the HTML structure of your site with the url you provided.
    With the Chrome Dev Tools I inspected to find which element was the main container for your search bar.

    This element is your main container and it is responsible for the centering:
    <ul class="header-nav header-nav-main nav nav-left nav-uppercase">
    Notice the class "nav-left"? …Change it to the class "nav-center".

    <ul class="header-nav header-nav-main nav nav-center nav-uppercase">
    This will center your search like that:
    https://i.imgur.com/DsyIMlX.png

    You might need a WordPress Child Theme to add custom CSS that does not get erased when you update your WordPress version. And your CSS inside the Child Theme could target that main element.

    #header ul.header-nav-main {
 justify-content: center !important;
}

    The !important is a specificity maximum level to be 100% sure that nothing else will bypass your rule. Sometimes WordPress has a lot of different CSS in many different files. If you can avoid the !important keyword it’s even better.

    Login or Signup to reply.
  2. 0

    Add this styling

    .header-nav.header-nav-main.nav.nav-left.nav-uppercase {
    justify-content: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search