htmlcsswordpresswoocommercestorefront

Woocommerce storefront theme Product Search Bar to page center

I have a WordPress e-commerce site graceamaron.com

in the site a search bar is located at top of the page at right side. But I want it in center. How do I change the order of the columns inside the header using CSS.

Simplified example:

header {
  width: 100%;
  background-color: firebrick;
  display: flex;
}

.logo,
.search{
  width: 25%;
}
.nav {
  width: 50%;
}

<header>
  <div class="logo">
    <p>logo</p>
  </div>
  <div class="nav">
    <p>Home contact ...</p>
  </div>
  <div class="search">
    <input type="text" placeholder="search">
  </div>
</header>

Present my site screenshot (search bar at right side)

enter image description here

and this is the way I want (page center)

enter image description here

Solution

  • Since this is WordPress and you are not able to change the HTML layout I've done the following CSS fix. I added display: flex to the wrapper of the 3 blocks inside the header. Then I added order attributes to the elements to order them to my liking, then I also added width and replaced margin with padding so it doesn't force any element to go on the next line.

    /* Header Wrapper */
.site-header .col-full {
    display: flex;
}

/* Site Logo */
.site-header .site-branding {
    order: 1;
    width: 25%!important;
    margin-right: 0!important;
    padding-right: 10px;
}

/* Searchfield */ 
.site-header .site-search {
    order: 2;
    width: 50%!important;
    padding-right: 20px;
}


/* Navigation */
.site-header .secondary-navigation {
    order: 3;
    width: 25%!important;
    margin: 0!important;
}

    Results

    enter image description here