Ashford is the only WordPress theme which offers the ability to build your main navigation using mega menus. It is a very powerful way to organize your content. It is especially useful to large sites with complex information architecture. Mega menus allow you to organize your content without relying on an “outline”.
Determine top level tabs
If you are familiar with sidebars, each top level tab on a mega menu is a “sidebar”. Ashford gives you the ability to add a maximum of 8 tabs. Your number of tabs is reduced if you turn on other Theme Options:
- It is automatically reduced by 1 tab if you Display Home tab (off by default)
- It is reduced by 2 tabs if you Display Search box (off by default)
- If you choose to Display follow Twitter/Facebook/RSS in navigation — you will need to customize the CSS or reduce your tabs by one. As of now, Ashford does not automatically factor this choice in as it does for search and home tab.
For example, this site is using 5 tabs plus displays the Home tab and the Search box. If I tried to add a 6 tab — it would just not get added. If I turned on the Twitter, Facebook and RSS icons – they would display, but it would appear broken unless I fixed it with custom CSS.
Instructions
These instructions will produce a navigation bar which includes a home tab, 5 mega menu tabs and a search box.
- Dashboard > Appearance > Ashford Options > Navigation > Select “mega menu”
- Dashboard > Appearance > Ashford Options > Build your site > Display Home tab > Select “Yes”
- Dashboard > Appearance > Ashford Options > Build your site > Display search box > Select “Yes”
Add tab label
If you view your site, you will see a home tab and a search box. To activate a mega menu tab, you first need to create the tab label:
Dashboard > Appearance > Ashford Options > Navigation > Enter mega tab 1
If you just type, “Tab 1″ and view your site. You will see a home tab and “Tab 1″. But it is not clickable as it does not have a link. This sometimes is desired for information architecture reasons you might have a label that does not directly correspond to “content”.
If you want the tab label to link to a page:
<a href="/link-to-tab-2">Tab 2</a>
If you view the site now, you will see home and “Tab 1″ but now it is clickable.
Add mega menu panel
At this point, you just have normal navigational link. To add a mega menu panel:
Dashboard > Appearance > Ashford Options > Navigation > Enter number of columns for mega menu tab 1
If you plan to have 2 columns, enter 2 (maximum of 4 columns). If you now look at the site, you still will not see a panel. To actually get a panel:
Dashboard > Appearance > Widgets
Add a custom menu widget to the side bar “mega_tab-1″ (assuming that you have a custom menu created). Add a text widget in the same place (assuming you can quick create one). Now if you view your site and hover over Tab 1 the mega menu panel appears below.
You can now repeat this same process for all the remaining four tabs.
Using widgets in mega menu sidebars
Each time you add a widget you effectively add a column. There is a maximum of 4 columns. You can use almost any widget available to WordPress when building your mega menus. It is recommended that you start with custom menu widgets and text widgets.
Each column in the mega menu panel is 160px wide, so your widgets need to fit nicely within that dimension. So if you add an image — make sure it fits.
Customizing mega menus
While it is possible to customize the menu menu CSS, it is complex especially if they need to remain editable. If you use custom menus, you can easily add icons and such to different links. Or turn links into buttons, etc. It is also possible to backgrounds to the panels or tabs.