Editing the header: layers and blocks

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

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.

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.

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.

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.