Header & Logo
The Header & Logo section controls the site header style, background, logo, and sticky behavior. Find it at Appearance → Customize → Header & Logo.
Header styles
Tabule Theme offers two header layouts:
- Header 1 — a single-row header with the logo on the left and the main menu on the right.
- Header 2 — a two-row header with a top bar (logo, tagline) and a separate navigation bar below it. Adds settings for the top bar background color and mobile background color.
Header settings
| Setting | Default | Description |
|---|---|---|
| Header background | #343a40 | Background color of the header bar. |
| Mobile header background | #343a40 | Background on mobile (Header 2 only). |
| Top header background | #ffffff | Background of the top bar (Header 2 only). |
| Menu font color | #FFFFFF | Text color of top-level menu items. Also used for the logo area text. |
| Sticky header | Off | When enabled, the header stays visible as the user scrolls down. |
| Header shadow | On | Adds a subtle drop shadow below the header bar. |
Logo
Upload your logo at Appearance → Customize → Site Identity → Logo. Logo width can be controlled separately for desktop and mobile:
- Logo width (desktop) — default 200 px, range 48–600 px (in Container section).
- Logo width (mobile) — default 200 px, range 48–300 px (in Container section).
If no logo image is uploaded, the site name from Settings → General → Site Title is displayed as text instead.
Sticky header
When the sticky header is enabled, the header is fixed to the top of the viewport on scroll. A small transition animation is applied when the header "sticks." The sticky behavior applies to both desktop and mobile.
Sticky header works best with Header 1. If you use Header 2 and a sticky header together, only the navigation bar sticks; the top bar scrolls away.