Page 1 of 1

[SOLVED]Move dropdown shopping cart under search bar

Posted: Thu Nov 20, 2014 2:52 am
by stclare
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

Re: Move dropdown shopping cart under search bar in header

Posted: Thu Nov 20, 2014 3:06 am
by uksitebuilder
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

Code: Select all

<div class="row">
      <div class="col-sm-8">
        <div id="logo">
                    <a href=""><img class="img-responsive" alt="St. Clare Heirloom Seeds" title="St. Clare Heirloom Seeds" src=" Header Image Dark Green.png"></a>
      <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">
      <p class="text-center">Your shopping cart is empty!</p>
<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>

Re: Move dropdown shopping cart under search bar in header

Posted: Thu Nov 20, 2014 3:34 am
by stclare
Thank you! Exactly what we were trying to do. That's awesome! :)