Storenvy: Moving navigation (collections) from top to the sidebar

**UPDATE: This tutorial was made pre-Cooper theme update.**

This tutorial will help you customize your Navigation links and move them from the top to your sidebar. You can see what they will look like at Bean Sprout Boutique.

STEP 1: Edit your HTML

1. To find your HTML codes, go to Store Admin>Design>Theme>Edit Pages >Layout>Using Custom HTML
2. Look for:  <div id="container"> Below that, you'll see the code for the navigation.
3. Select and Cut the following code from your html.

<ul id="nav">
          {% for nav_item in collections.all %}
          <li id="collection_{{nav_item.id}}_link" {% if nav_item == collection %} class="current" {% endif %}>
            <a href="{{nav_item.url}}">
              {{ nav_item.name }}
              <span class="collection_count">({{ nav_item.product_count }})</span>
            </a>
          </li>
          {% endfor %}
        </ul>

4. Look for:  <div id="sidebar"> and paste the navigation code below it.
5. Save changes and preview your store.


*TIP: If you have an avatar on your page and want the navigation after it, look for <div id="avatar"> and paste the navigation code after the </div>.



STEP 2: Edit your CSS

1. To find your CSS codes, go to Store Admin>Design>Theme>Edit Styles>CSS Mode
2. Find the following code on your CSS page. If it isn't there, then Copy and Paste the following code on your CSS page.

/*: Navigation Links :*/

#nav {
background-color: #FFFFFF; 
overflow: hidden;
margin: 0;
padding: 0 5px 10px;
display: block;
width: 200px;
}

#nav li {
float: left;
}

#nav li a {
color: #70920a;     /*: Change to fit your color scheme :*/                    
display: block;
margin: 0 4px 4px 0;
padding: 5px 10px;
font-weight: bold;   /*: Change to normal is you don't want them bold. :*/
font-size: 18px;   /*: Change if you want the font larger or smaller :*/
}

#nav li.current a {
  color: #703C0A;          /*: This is the color that will appear when you are on the current page. Change to fit your color scheme. :*/          
}

#nav li a:hover {
background-color: #FFFFFF;        
color: #926312;         /*: Change to a different color for the rollover :*/
text-decoration: none;
}

#nav li span.collection_count {
font-size: 11px;
vertical-align: 1px;
font-weight: normal;
}

3. Edit to fit your store theme and colors.
4. Save changes and preview your store.



My navigation looks like this. You can see the entire page at Bean Sprout Boutique.