[Resolved] Big search bar in center in header

[Steve]

So I managed to figure out that it was the ‘Before Header Content’ hook I needed to the code into. I ended up with this code in the header to mimic the above image:

<div class="grid-20">
  <div class="site-logo">
    <a href="https://example.com/" title="Site Name" rel="home">
      <img class="header-image" alt="Site Name" src="logo.png" title="Site Name">
    </a>
  </div>
</div>
<div class="grid-60">
      <?php get_search_form(); ?>
</div>
<div class="grid-20">
<button class="wc-header-cart"><a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><i class="fa fa-shopping-bag fa-lg" aria-hidden="true"></i> <?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a></button>
</div>

and this css

.site-logo img{
	height: 75px;
}
header .grid-60 {
	text-align: center;
}
@media (min-width: 769px) {
header .search-form {
margin-top: 20px;
	}}
@media (min-width: 769px) {
.site-header input[type="search"] {
	box-sizing: content-box;
	width: 70%;
	padding: 7px 10px;
	}}
@media (min-width: 769px) {
.site-header input[type="submit"] {
	padding: 7px 10px;
	}}

button.wc-header-cart{
  float: right;
  display: inline-block;
  background: #326992;
  padding: 10px 12px;
  font-size: .9em;
  border-radius: 3px;
  margin-top: 18px;
}
button.wc-header-cart:hover{
  background: #3F85B8;
}
.site-header button.wc-header-cart a {
    color: #fff;
}

Still need to fiddle with a little css to view perfectly on mobile but this has turned out awesome so far 🙂

Many thanks

[Leo]

Glad you’ve figured out!

[Author]

Posts