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:
*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.)
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.