# Header and menus

> Set the KLEO menus, logo and header layout: menu locations in Appearance > Menus, header options in the KLEO theme options.

Source: https://seventhqueen.com/docs/kleo/header-and-menus/

The KLEO header shows your logo, the main menu and, depending on your settings, search and account links. You build the menus in WordPress and set the look of the header in the KLEO theme options. A demo import sets up the demo menus and header options for you; change them the same way.

## Create a menu and place it in the header

1. Go to **Appearance > Menus** and click **create a new menu**. Give it a name and click **Create Menu**.
2. Add pages, posts, categories or custom links from the left column and click **Add to Menu**. Drag the items to order them; drag an item slightly to the right to make it a sub-item.
3. Under **Menu Settings > Display location**, check **Primary Menu**.
4. Click **Save Menu**.

KLEO has four menu locations:

| Location | Where it shows |
|---|---|
| **Primary Menu** | The main menu in the header |
| **Secondary Menu** | A second menu in the header, next to the main menu |
| **Top Menu** | The top bar above the header (turn it on in **Theme Options > Top bar**) |
| **Side Menu** | The side menu, when you turn it on (see below) |

## Change the logo

1. Go to **Appearance > KLEO Panel** and open the **Theme Options** tab (it needs the K Elements plugin).
2. Open **General settings** and upload your image in **Logo**. Add a **Logo Retina** (twice the size) for sharp logos on high resolution screens, and a **Mobile Logo** if you want a different one on phones.
3. Click **Save Changes**.

## Header options

Go to **Appearance > KLEO Panel > Theme Options** and open **Header options**. The main settings:

- **Header Layout**: how the logo and menus are placed (normal, extras, split, centered logo and more).
- **Header Height** and **Menu Height**.
- **Sticky Main menu**: keeps the menu at the top while you scroll, with **Resize logo on scroll** and the heights used when scrolled.
- **Transparent Main Menu** and **Main Menu Full Width**.
- **Ajax Search in menu** and **Search menu location**.

Fonts of the menu are under **Header Fonts**. To add a menu that slides in from the side, open **Side Menu**, turn on **Enable side menu on your site** and assign a menu to the **Side Menu** location. Click **Save Changes** when you are done.