# Header Manager

> Your logo, the menu bar's look, sticky and transparent headers, the search icon, a call-to-action button, and tablet and phone sizes.

Product: NijeesWeb website builder · Source: https://www.nijeesweb.com/docs/website/header-footer/header · Updated 2026-10-07

**Layout › Header Manager** controls the bar at the top of every page: your logo, the menu's look and the header's behaviour. A **Live Preview** at the top shows the result as you change things — switch it between **Solid / Scrolled** and **Transparent (home)** to see both states.

![The Header Manager](https://www.nijeesweb.com/marketing/img/docs/admin/header-1200.webp "Header Manager: live preview on top, settings below")

## Your logo

Under **Logo**:

1. **Image** — select **Select from Media** to pick your logo from the media library, or upload it there first.
2. **Logo Alignment** — left, centre or right.
3. **Display Logo** — *Side by side with links* (most common) or *Above the links* (a centred logo over the menu).
4. **Logo Max Width** — how wide the logo may get.

> [!TIP]
> A transparent PNG looks sharpest. Upload it at about twice the size it is shown (for example 360 px wide for a 180 px logo) so it stays crisp on phone screens.

## The bar

- **Main Container** — the bar's **Width** and **Padding** (top, bottom, left, right).
- **Background** — *Solid* with a colour, or *Gradient* with two colours and a direction.

## The links

- **Links Alignment** and **Centre On** — centre the links in the space left by the logo, or on the bar itself.
- **Font Color**, **Hover Color**, **Font Weight**, **Font Size** (any CSS size, such as `16px`, `1.2rem` or `clamp(14px, 1.2vw, 18px)`), **Font Family**, **Links Padding**.
- **Manage Menu Links** — the links themselves are edited in [Menu Links](https://www.nijeesweb.com/docs/website/header-footer/menu-links).
- **Dropdown Links** — the width, padding, background and corner radius of dropdown menus.
- **Bar Style** and **Menu & Link Effects** — hover underlines, highlights and other effects for the links.

## Behaviour & Actions

- **Navbar Type**
  - *Normal* — scrolls away with the page.
  - *Sticky* — stays pinned to the top.
  - *Sticky & shrink* — pinned, and padding, logo and bar height ease down once the visitor scrolls.
- **Transparent over the home hero** — the header starts see-through on the home page and fades in its background on scroll. Best with a full-width picture as the home page's first section. Set the **Link Colour (while transparent)** so links stay readable over the picture, and optionally a **Divider Below the Header**.
- **Site Search** — *Show search icon* adds a search that looks through your pages and blog posts.
- **Call-to-action Button** — *Show button*, with **Button Text** (such as *Get in touch*), **Button Link** (such as `/contact`) and **Open in a new tab**. It uses your theme's button style. *The button only appears once a link is set.*

## Tablet and phone

Under **Responsive**, three sizes: **Mobile** (up to 575 px), **Tablet** (576–991 px) and **Desktop** (992 px and up). Below 992 px the links collapse into a menu button automatically.

For Tablet or Mobile, switch on **Override → Use different padding / logo size here**, then set the **Bar Padding**, logo size and **Links Font Size** for that size. *0 keeps the desktop size*; blank keeps the desktop font size.

## Use your own HTML header

If you prefer to write the header yourself, see [Custom header & footer code](https://www.nijeesweb.com/docs/website/settings/custom-header-and-footer-code).

## Let the header float over a picture on one page

A page that opens on a full-width picture can let the header sit on top of it: in **Info Pages**, select **Edit** on the page and choose **Let the header float over the content**.