Splitting navigation

Stereohead
Tourist
13 0 1
Hey everyone, I am wondering if it is possible to split the main navigation into two separate navigation sections, one at the top of the header and one at the bottom of the header? The only way i could think of doing it was to hard code the footer links and then use the footer link as part of the main nav and the main links to be the other part of the nav, but this isn't ideal. Any ideas? Thanks, Trevor
0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5711 1 343

Hi Trevor,

I am wondering if it is possible to split the main navigation into two separate navigation sections

Create a new link list. You may have missed the link to create a menu (aka link list) in your admin… See screen capture I’ve attached below. Name your new menu “Secondary Menu”. Add to it all the links you will remove from your Main Menu. Then, add the Liquid code needed to output this menu on screen in the template theme.liquid.

0 Likes
Stereohead
Tourist
13 0 1

Hi Caroline,

Thank you so much, it worked perfectly, you’re the best!

Trevor

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5711 1 343

Welcome!

0 Likes
Stereohead
Tourist
13 0 1

Hey Caroline,

One more question, is it possible for me to style the secondary menu I just made differently than the main one? I tried duplicating the style from the main menu and then adjusting it for the new menu but it messed everything up. Is there a trick to this, I can’t seem to get it to work.

Thanks,

Trevor

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5711 1 343

One more question, is it possible for me to style the secondary menu I just made differently than the main one?

Yes. Start by giving that menu holder (a ul element?) some sort of CSS hook, like an id attribute. Say, id ="secondary-menu".

Then add CSS rules to your stylesheet that apply only to your menu like so:


#secondary-menu {
... some CSS properties & their values...
}
#secondary-menu li {
... some CSS properties & their values...
}
#secondary-menu li a {
... some CSS properties & their values...
}
0 Likes
Stereohead
Tourist
13 0 1

That’s what I had done, but now the top menu has lost its rollover state, and the bottom menu has lost its normal state, which is suppose to be white. Sorry, I’m new to CSS so I am still figuring it all out.

http://stereoapparel.myshopify.com/

All I am trying to do is make the lower buttons in the header to be a larger font size than the top ones.

Trrevor

0 Likes
abowman99
Tourist
5 0 1

header.PNG

I am also looking for help with something like this. I am currently using the debut theme and want to move some items from nav bar to top banner. I am current using the announcement bar as a "banner" to visually show what I am looking for. I will need to somehow create a banner for the header with these links inside the banner. Any help would be greatly appreciated!

0 Likes