# Editing the header: layers and blocks

> Turn the Top Bar, Main Bar, Nav Bar and Bottom Bar on or off; set up search, sign in, dark mode, the menu and the breaking news ticker; change the bar color.

*Help Center / Design · Updated: 2026-10-15 · 7 min read*

- **Available to:** Site admins
- **Plans:** All plans

The header is the modular area at the top of all your pages. In the design editor it’s listed layer by layer under **Header** in the left panel.

## Layers

| Layer | Default blocks |
| --- | --- |
| Top Bar | Currency, gold and stock rates (left); city weather (right) |
| Main Bar | Site logo (left), search box (center), search button, dark/light mode button and Sign In (right) |
| Nav Bar | Navigation and category menu |
| Bottom Bar | BREAKING NEWS ticker |
| Mobile Menu Drawer | The panel that opens from the menu button on phones; Sections 1–4 (25% each) |

The number of blocks is shown next to each layer’s name (e.g. “Main Bar (5)”). Use **+ Add** to add a block to that layer.

## Layer (bar) settings

Click the layer’s name in the left list (e.g. **Nav Bar**); its settings open on the right:

- **Enable layer:** When off, the layer is hidden on the site and in the preview (the list shows “Off”).
- **Fixed / Sticky bar:** The bar sticks to the top of the screen when the page scrolls.
- **Container width:** Default (1280px) or **Full screen width** (edge to edge).
- **Height & vertical padding:** Compact, Normal or Tall.
- **Region width split (Left / Center / Right):** Ready layouts (80/20, 70/30, 50/50, 15/70/15, 20/80, 33/33/33) or the **Fine width** sliders.
- **Bar color & design:** Separately for **Light mode** and **Dark mode**: **Background color** (Default, White, Light gray, Gray, Dark slate, Black, Navy, Red/Burgundy, Emerald, Transparent or your own color code), **Bottom border line** and its color, **Text and icon color**.
- **Blocks in this layer:** The list of blocks in the layer.

> **Tip:** To change the header color, select the layer (usually the **Main Bar**) and type your own color code into **Background color** (e.g. #d7050f). A **Reset** link appears next to fields you changed.

## Moving and aligning blocks

- Use **Move to another layer** in a block’s settings to move it to another bar.
- **Alignment within layer:** Left, Center or Right.
- Change the order within the layer with the **↑ / ↓** arrows in the left list or the toolbar in the preview.

## Search box and search button

- **Appearance:** Filled, Outlined, Underlined, Plain, Black, Site color, Shadow card, Transparent, With button or Icon only.
- **Size & geometry:** Height, corner radius, width and max width (px).
- **Placeholder text:** The text shown in the box (e.g. “Search news…”).
- **Color customization:** Background, border, text, icon, placeholder and hover colors for Light and Dark mode. Empty fields use the selected design’s colors.

## Dark / light mode button

When a visitor clicks this button the site switches to the dark or light theme. You can set the button’s style, size, corner radius and colors for both themes. Delete the block if you don’t want it.

## Sign In button

- **Button text:** Shown when not signed in; once a reader signs in, their name and avatar appear.
- **Display layout:** Icon + Text, Icon only or Text only.
- **Button design:** Filled, Outlined, Soft, Gradient, Black, Ghost, Link, Glowing, 3D, Neon and more.
- **Icon**, **Size**, **Shape**, **Corner radius** and **Hover / attention effect**.
- **Color customization:** Normal and hover colors for Light and Dark mode; **Reset all colors** returns to defaults.

If you turned off reader sign-ups you can remove this block. See [reader accounts](https://ulakom.com/md/en/help/engagement/reader-accounts.md).

## Menu (Navigation & Category)

- **Hover effect:** Default, Color change, Underline (slide from left / from center / instant), Thick underline, Gradient line, Top line, Dot, Square brackets [ ], Filled pill, Light pill, Sliding fill, Border, Highlighter, Glow, Lift, Grow. Hover in the preview to try them.
- **Write menu titles in UPPERCASE** option.
- **Menu to show** and colors: menu text color, hover text color, dropdown menu colors (each with opacity).

The menu items themselves (which categories, order, submenus) are edited on **Manage → Menu**, not in the design editor. See [categories and menu](https://ulakom.com/md/en/help/publishing/categories-menu.md).

## Breaking news ticker

- **Badge & title:** Badge text (e.g. BREAKING NEWS), icon (e.g. Lightning) and badge style.
- **Flow & animation:** Bottom to top, Scrolling band or Fade; **Story change interval** (e.g. 4 seconds); arrow buttons and counter (1/5).
- **Display & interaction:** Story time, category tag, pause on hover.
- **Box radius** and colors: badge, time badge, category badge, arrows, strip/box background and border.

## Top Bar: rates and weather

The currency/gold/stock block and the weather block are in the Top Bar. Click them to set what they show and where; delete them, or switch off the whole Top Bar with **Enable layer**.

## Mobile Menu Drawer

The panel that opens when the menu icon is tapped on phones. Add blocks to Sections 1–4 with **+ Add**, and hide a section with the eye icon. Check it by switching the preview to **mobile** in the top bar.

## Reusing the header on another site

The **download** icon at the top right of the layer settings exports that layer’s settings as a file; the **upload** icon imports them. To move the whole design see [import and export](https://ulakom.com/md/en/help/sites/import-export.md).

## Related articles

- [Changing the logo, site icon and colors](https://ulakom.com/md/en/help/design/branding.md)
- [Getting started with the design editor](https://ulakom.com/md/en/help/design/design-editor.md)
- [Categories and menu layout](https://ulakom.com/md/en/help/publishing/categories-menu.md)
- [Editing the footer](https://ulakom.com/md/en/help/design/footer-editor.md)

---

Source page: https://ulakom.com/en/help/design/header-editor