Post by stclare » Thu Nov 20, 2014 2:52 am

How do we move the drop down shopping cart button that's to the right of the search bar so it will instead be under the search bar in the header(in the default template), and then move both more to the right ? We would like to do this so we can put in a bigger Company Logo when viewed on a desktop resolution, and so the look of the search bar and cart button are more balanced with our logo, instead of in a row, aligned to the top, with a big blank space underneath.

Example page of how it looks right now http://www.stclareseeds.com/store/
Last edited by stclare on Thu Nov 20, 2014 3:36 am, edited 1 time in total.

St. Clare Audio Still in it's newborn stage, a major work in progress..

St. Clare Heirloom Seeds Our original business, our current "bread and butter". Learned HTML, CSS, and a little PHP to develop it from scratch ourselves, having never done coding before. Then we discovered the awesomeness of Shopping Carts. :-)


New member

Posts

Joined
Mon Aug 18, 2014 9:12 pm

Post by uksitebuilder » Thu Nov 20, 2014 3:06 am

You want to end up with something like the following screenshot

Image

Basically in your current header 'row' div container there are 3 div containers

<div class="col-sm-4"> // Contains your logo
<div class="col-sm-5"> // Contains the Search Bar
<div class="col-sm-3"> // Contains your shopping cart

What I did was to grab the contents of the middle div contaner and put directly below the contents of the third container

I then deleted the middle container altogether, which was now empty <div class="col-sm-5"> </div>

That leaves us with a column 4 wide and a column 3 wide, but we need those to add up to 12

So I changed the 4 to 8 and changed the 3 to 4

see below final code

Code: Select all

<div class="row">
      <div class="col-sm-8">
        <div id="logo">
                    <a href="http://www.stclareseeds.com/store/"><img class="img-responsive" alt="St. Clare Heirloom Seeds" title="St. Clare Heirloom Seeds" src="http://www.stclareseeds.com/store/image/catalog/Website Header Image Dark Green.png"></a>
                  </div>
      </div>
      <div class="col-sm-4"><div class="btn-group btn-block" id="cart">
  <button class="btn btn-inverse btn-block btn-lg dropdown-toggle" data-loading-text="Loading..." data-toggle="dropdown" type="button"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
<div class="input-group" id="search">
  <input type="text" class="form-control input-lg" placeholder="Search" value="" name="search">
  <span class="input-group-btn">
    <button class="btn btn-default btn-lg" type="button"><i class="fa fa-search"></i></button>
  </span>
</div></div>
    </div>

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by stclare » Thu Nov 20, 2014 3:34 am

Thank you! Exactly what we were trying to do. That's awesome! :)

St. Clare Audio Still in it's newborn stage, a major work in progress..

St. Clare Heirloom Seeds Our original business, our current "bread and butter". Learned HTML, CSS, and a little PHP to develop it from scratch ourselves, having never done coding before. Then we discovered the awesomeness of Shopping Carts. :-)


New member

Posts

Joined
Mon Aug 18, 2014 9:12 pm
Who is online

Users browsing this forum: No registered users and 3 guests