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. :-)
You want to end up with something like the following screenshot
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
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>
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. :-)
Who is online
Users browsing this forum: No registered users and 9 guests
