Creating & Customizing Menus

Creating menus is usually a fairly simple process via the WordPress dashboard (Appearance --> Menus). The WordPress Menu User Guide is a great resource for basic info on how to create and edit menus.

Can I create a multi-level/sub-menu/nested menu with your themes?

Absolutely! Creating a multi-level menu is no problem, and in fact should not be a theme-specific task. Take a look at the section on Creating Multi-level Menus in the WordPress Codex for a step-by-step guide of how-to in the WordPress dashboard.

What menu locations are available in your themes?

Heidi comes with one menu location, the Primary Menu. This menu shows in the header area, just beneath your site title and tagline (if you have set your site title and tagline to display).

Gillian comes with three menu locations: Bottom Menu (Main), Top Menu (Optional), and Social Menu (Optional). Bottom Menu will place your items in the dark blue bar across the bottom of the header; Top Menu puts them in the light purple bar up top. Social Menu auto-populates with the appropriate social media icon for your links. You can see examples of these three menus at my demo for Gillian to get a better visual.

How does Gillian's Social Menu work?

The Social Menu on Gillian is designed to display the corresponding social media icon from the available icon in the FontAwesome icon resource set. Current social media sites that are supported in the Gillian Social Menu are:

  • Facebook
  • Twitter
  • Dribbble
  • Google+
  • Pinterest
  • Github
  • Tumblr
  • Youtube
  • Flickr
  • Vimeo
  • Instagram
  • LinkedIn

If you are linking to your social media profile on one of these sites, you do not need to worry about touching any code or selecting the right icon yourself; all you have to do is input your social media link (for example, into the menu in your WordPress dashboard, and the Social Menu will select the appropriate icon based off of your link.

If no social media icon exists in the FontAwesome set for a site that you are linking to, the Social Menu will display a default icon. If you would like to replace this icon with one of your own choosing, you can do so by adding the following code into the Additional CSS section of your WordPress Customizer:

.menu-social li a[href*="SITEURL"]::before {
	content: '\UNICODE';

...where SITEURL is replaced by the base URL you are linking to, and \UNICODE is replaced with the appropriate unicode for your icon.

So, for instance, if you want to add the WordPress icon from FontAwesome for a link to your WordPress forum profile, you would add the following line of code to Additional CSS:

.menu-social li a[href*=""]::before {
	content: '\f19a';