Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Big search bar in center in header

Home Forums Support Big search bar in center in header

Viewing 2 posts - 16 through 17 (of 17 total)
  • Author
    Posts
  • #445244
    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

    #445254
    Leo
    Staff
    Customer Support

    Glad you’ve figured out!

Viewing 2 posts - 16 through 17 (of 17 total)
  • You must be logged in to reply to this topic.