Storenvy: Adding top navigation tabs

This tutorial will help you customize your navigation links by adding tabs to the top of your page. 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>HTML Pages >Layout>Using Custom HTML
2. Look for:  </div><!-- end #header --> Below that, is where you'll paste the new code.
3. Select and Copy/Paste the following code to your html.

<div id="topnav">
<ul id="tabnav">
<li class="tab1"><a href="http://www.yoururlhere.com/">Home</a></li>
<li class="tab1"><a href="http://www.yoururlhere.com/gallery">Gallery</a></li>
</ul>
</div>

4. Save changes.

*TIP: I only made tabs for the Home page and Gallery page. You can make as many as you wish. Just copy/paste the code and change the tab# and url for each.


STEP 2: Edit your CSS

1. To find your CSS codes, go to Store Admin>Design>CSS Mode
2. Copy and Paste the following code on your CSS page.

#topnav {
width: 200px;
margin: 0px 0px -9px 220px;
}

ul#tabnav {
text-align: left;
list-style-type: none;
}

ul#tabnav li {
display: inline;
background-color: #fff;
}

ul#tabnav li a {
padding: 7px;
color: #fff;
background-color: #70920a;
margin-right: 0px;
text-decoration: none;
}

ul#tabnav a:hover {
color: #3E4D02;
background-color: #fff;
}

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


My top navigation tabs look like this. You can see the entire page at Bean Sprout Boutique.