Monday, June 2, 2014

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.





9 comments:

  1. Thank you so so much for this! It saved me hours - no, days - of trying to figure this out.

    Would you happen to know how to make some of the tabs drop down? For example one of my tabs is "Women's" and I want it to drop down to reveal "Clothes", "Shoes", etc.

    I appreciate it so much.

    Thank you!

    ReplyDelete
    Replies
    1. I'm so glad I could help! Unfortunately, I haven't found a good way to do drop downs that work across platforms. My html/css knowledge is limited and quickly becoming outdated with new updates in technology! It'd be great if Storenvy would eventually add some new layout features such as those. Best of luck to you!

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank you so much for this tutorial!!! I have been looking for exactly this!

    One question, though: when I paste the CSS portion, all the tabs are scrunched up together and there's an error saying "Number of products per page could not be saved". Any thoughts on why this may happen? (I'm using the new Cooper theme)

    ReplyDelete
    Replies
    1. I should have looked more closely at the code... I just needed to change the width parameter! Awesome tutorial, thanks again!

      Delete
  4. Hey Nakesha I have been used your custom css codes and was wondering if you could help me with a problem I have. I have been searching for an answer for 3 days and can't find anything. I use photoshop often and certainly know how to create a png/transparent image. When I upload my header to the cooper them the header gets filled with the content background color. I lover your header and want my header to be the same. I was wondering if you knew what might be wrong or if you could point me in the right direction. Thank You for your time.

    ReplyDelete
    Replies
    1. Hi. Sorry for the late response. You may have found your solution already. I was looking at mine to see what I did. I used a png file for the header image. Only thing I saw in my CSS code was...

      #header {background-color: transparent;}

      Maybe look through your code and see if yours says transparent. That's the only thing I can think of. Hope that helps!

      Delete
  5. Is it possible to add tabs underneath the top tabs? Like if you scroll over the tab it gives you more options below to click on.

    ReplyDelete
    Replies
    1. I've tried making a drop down menu and it wasn't successful. There may be a way of doing it to get it to work, but it's outside of my knowledge. You can search for html drop down menus for more information on them. Good luck!

      Delete