Looking to add a small set of links to your header?

You can of course use custom CSS in the brand designer to target a list in the .zen.header (see below). But if you'd like to design a simple branded header menu without creating any additional CSS, try the following:

1. To begin with, you'll want to find your .zen.header page. (See our Header page for more information.)
2. Now, just click the pencil to edit the section on the page. 
3. Add a simple row of links, keeping them on a single line (don't create a list with them, unless you'd like to add some custom CSS to float them or otherwise create a horizontal list from them.)
4. You can add a "pipe" (divider) as a visual element between the list items, if you'd like.
5. Now, wrap that entire list with the Zen Wrap Macro. 
6. Adjust your macro parameters. (This is where it gets fun  ) You can experiment with settings, but here are some suggestions to get you started:
   1. Float right
   2. Set a background color from your palette
   3. Set the padding to: 12px 14px 6px 14px
   4. Set the margins to: -6px 24px 0 0*
   5. Set the class to: rounded-corners*
7. That's it! You should now see a styled menu in your header. 
8. Experiment with different macro settings to get just the look and layout you're after.

*NOTE: Because we're using a class that automatically brings in FOUR rounded corners (a radius setting), we're adding extra padding up top and setting a negative top margin to move those top corners off the "page." You can achieve the same look more cleanly by naming your div and adding CSS to JUST target the bottom two corners for a radius setting. Readjust padding and margins accordingly.

 Wondering how to get the "special link" outside the Wrap macro? Read A Bit More to learn how.

If you 'd like to have a link or two outside of your background color, like we do in our example above, simply copy the same Wrap Macro content and paste it. Then edit the link(s) inside, change the background setting to transparent, and adjust the padding and margins as needed.

(Depending upon your brand settings for links, you may need to change the color of the link(s). You can do that with the color palette picker in the editor, or target with custom CSS.)

Want something fancier?

You can also add a class or div to the Wrap Macro settings, and use the Custom CSS option in the Brand Designer to fine-tune your header menu in any way you'd like (just be careful of your other header elements, such as menu, logo, and possibly search and breadcrumbs.)

It's dead simple to add a CSS file to your brand, btw. Just click on "Add CSS/Javascript" in the Brand Designer to create a new file. It will then appear in the file list at the bottom of the Brand Designer left panel. Click on that file, and add your custom CSS.

New to CSS?

We found this oldie-but-goodie post on the subject of 'taming lists' that has a solid overview of the basics of styling lists as navigation.