# Menus

> The four menu locations of Wovie: the header menu with its submenus, the link columns of the footer, your social links with their icons, and the links next to the copyright.

Source: https://doothemes.com/docs/wovie/appearance/menus

---

## Overview

Wovie uses WordPress menus for the navigation of your site. Create them in **Appearance › Menus**, or in **Appearance › Customize › Menus**, and assign each one to a location:

| Location | Where it shows |
|---|---|
| **Menu header** | The main menu, at the top of every page |
| **Footer columns** | The columns of links in the footer |
| **Footer social links** | Your social networks, next to the footer logo |
| **Footer bottom links** | A few links next to the copyright, such as your terms and privacy policy |

[SCREENSHOT_HERE: Appearance › Menus, Manage Locations tab, with a menu assigned to each location of Wovie]

## Menu header

The main menu of your site. It has two levels: an item with sub-items opens a dropdown on computers, and an accordion in the menu of phones.

- **Too many items:** the menu stays on one line. The links that do not fit go into a **More** dropdown at the end, and come back as the window grows. Items with sub-items always stay visible.
- **Without a menu:** until you assign one, the header shows links to your movies, TV shows and collections.
- **On phones**, the menu opens from the button at the top of the screen.

Good items for this menu are your archives, a **Genres** item with your main genres as sub-items, and your collections. See [Archives and filters](https://doothemes.com/docs/wovie/pages/archives).

[SCREENSHOT_HERE: The header of the site on a computer, with a dropdown open and the More menu]

## Footer columns

Each top-level item is the title of a column, and its sub-items are the links of that column:

```text
Explore          ← column title (top-level item)
  Movies         ← link
  TV Shows       ← link
Help
  Contact
  Request a title
```

- The link of a column title is not used: give it any address, such as `#`.
- A column without sub-items is not shown.
- The footer shows up to 7 columns.
- On phones, each column opens and closes with its title.

[SCREENSHOT_HERE: The footer of the site with several columns of links]

## Footer social links

Add one item for each of your profiles, with the address of the profile. Wovie picks the icon from the address: Facebook, Instagram, X, TikTok, YouTube, Telegram, WhatsApp, Discord, GitHub, Google Play, the App Store and many more. An email address (`mailto:`) gets an envelope, and an address it does not recognize gets a generic link icon.

The text of each item shows next to its icon, and links to other sites open in a new tab.

## Icons with CSS classes

You can choose the icon of an item with Font Awesome classes, in the **CSS Classes** field of the item:

- **Footer social links**: write the classes of the icon, such as `fa-brands fa-mastodon`. They replace the icon picked from the address.
- **Footer columns**: write `fas-before` and the icon, such as `fas-before fa-crown`, to show it before the text.

If you do not see **CSS Classes**, turn it on in **Screen Options**, at the top right of **Appearance › Menus**. Find the names of the icons at [fontawesome.com](https://fontawesome.com/icons).

## Troubleshooting

| Problem | What to do |
|---|---|
| The header shows Movies, TV Shows and Collections instead of my menu | Assign your menu to **Menu header** in **Manage Locations** |
| Some items of the header are inside **More** | They do not fit in one line. Shorten their names or move some into sub-items |
| A column of the footer does not appear | It needs at least one sub-item. Only the first 7 columns are shown |
| A social link shows a generic icon | Wovie does not recognize its address. Write the icon classes in **CSS Classes** |
| I do not see the CSS Classes field | Turn it on in **Screen Options** |