The header is the first thing every visitor sees. TruCMS ships nine complete header layouts. Pick one, assign your menus, add a call-to-action button and fine-tune colours and behaviour — all from Theme Options.
Appearance → Theme Options → Header. Choose a layout by clicking its miniature preview, then adjust the options below it.
Each preset is its own template
Every preset is a complete, separate header design, not a re-coloured copy of one layout, and the miniature you click is the same structure that is rendered. Colours, fonts and the logo height apply to all of them.
| Preset | Structure | Good for |
|---|---|---|
| Classic: logo left, navigation right | The logo sits on the left and the primary menu follows it. | Most websites, especially those with five to eight menu items. |
| Centered brand: logo on top, navigation below | The logo is centred in the first row. | Brands with a strong logo, boutiques, restaurants and magazines. |
| Split navigation: logo in the middle | The logo is centred and the primary menu is divided around it: the first half of the items to its left, the rest to its right. | Symmetrical, brand-led designs with an even number of main items. |
| Floating capsule: rounded detached bar | The header is a rounded, shadowed capsule that floats above the page instead of spanning edge to edge. | Modern product sites, agencies and landing pages. |
| Minimal: full-screen overlay menu | Only the logo, the account and cart icons, the button and a Menu button are visible. | Portfolios, studios and designs where the page content is the star. |
| Store: search-first two-tier header | The top tier holds the logo, a wide product search field, the account icon, the cart icon and the button. | Online shops and catalogues. Pairs with the TruCommerce header cart. |
| Service: contact details and call to action | The logo and navigation are joined by a contact card — an icon, a small label (such as Call us) and the number or email — followed by the account icon, cart icon and a prominent button. | Clinics, salons, trades and any business that wants to be called or booked. |
| Hanging tab: logo on a tab below the bar | The bar carries the navigation, icons and button; the logo sits on a raised white tab that hangs below the bar’s edge, like a label.. | Heritage brands, schools and organisations that want a distinctive logo placement. |
| Index: numbered, ruled navigation cells | Navigation items are laid out as ruled cells, each with a small number (01, 02, 03…), in an editorial, architectural style. | Studios, publishers, architects and typographic designs. |
The Classic preset on the home page.
The logo sits on the left and the primary menu follows it. The secondary menu, account icon, cart icon and header button are grouped on the right. This is the most familiar layout and gives menus the most room.
Best for: Most websites, especially those with five to eight menu items.
The Centered brand preset on the home page.
The logo is centred in the first row. The account icon, cart icon and button sit on the right of that row, and your navigation is centred on its own row beneath a thin rule. When the site has a contact number stored (website templates set one), it appears with a phone icon on the left. Turn on Show search in header to add a search button.
Best for: Brands with a strong logo, boutiques, restaurants and magazines.
The Split navigation preset on the home page.
The logo is centred and the primary menu is divided around it: the first half of the items to its left, the rest to its right. The account icon, cart icon and button stay on the far right.
Best for: Symmetrical, brand-led designs with an even number of main items.
The Floating capsule preset on the home page.
The header is a rounded, shadowed capsule that floats above the page instead of spanning edge to edge. The logo, menu, icons and button are all inside the capsule.
Best for: Modern product sites, agencies and landing pages.
The Minimal preset on the home page.
Only the logo, the account and cart icons, the button and a Menu button are visible. Choosing Menu opens the whole navigation as a full-screen overlay.
Best for: Portfolios, studios and designs where the page content is the star.
The Store preset on the home page.
The top tier holds the logo, a wide product search field, the account icon, the cart icon and the button. The navigation sits on its own tinted second tier. The search field is always shown in this layout.
Best for: Online shops and catalogues. Pairs with the TruCommerce header cart.
The Service preset on the home page.
The logo and navigation are joined by a contact card — an icon, a small label (such as Call us) and the number or email — followed by the account icon, cart icon and a prominent button. When no button text is set, the button reads Contact us.
Best for: Clinics, salons, trades and any business that wants to be called or booked.
The Hanging tab preset on the home page.
The bar carries the navigation, icons and button; the logo sits on a raised white tab that hangs below the bar’s edge, like a label.
Best for: Heritage brands, schools and organisations that want a distinctive logo placement.
The Index preset on the home page.
Navigation items are laid out as ruled cells, each with a small number (01, 02, 03…), in an editorial, architectural style. The logo, icons and button follow the usual positions.
Best for: Studios, publishers, architects and typographic designs.
The header gets its links from menus you build in Appearance → Menus. Assign them at the top of the Header tab.
| Option | What it controls |
|---|---|
| Primary Menu | The main navigation, displayed next to the logo (or around it, depending on the preset). Required. |
| Secondary Menu | An optional second menu shown on the right side of the header, for example Sign in or Help links. |
| Logged-in User Menu | A menu to show to signed-in members instead of the default account links (Profile, Team, API Tokens, Logout). Only the top-level items are used; child items are ignored. Leave empty to keep the defaults. |
| Option | What it does |
|---|---|
| Header button text | The label of the call-to-action button (for example Book now). Leave it empty to hide the button. The Service layout shows Contact us when this is empty. |
| Header button link | Where the button goes: a page path such as /contact-us or a full address. |
| Account button | Show or Hide the account icon. It opens the sign-in page for visitors and the account menu for members. Hide it on a site that has no booking, shop or member area. |
| Cart icon | There is no header option for the cart: it follows the TruCommerce setting Show cart in the theme header in Settings → TruCommerce Settings. A site without a shop shows no cart. |
| Show search in header | Adds a search button to the Centered layout. The Store layout always includes a search field; other layouts have no search. |
The Service layout displays a small card with an icon, a label and your contact details. These options appear only when the Service preset is selected.
| Option | What it does |
|---|---|
| Contact card icon | Choose Phone, Email, WhatsApp, Location or Opening hours. |
| Contact card label | A short line above the details, for example Call us or Open daily. Empty uses Call us or Email us. |
| Contact card details | The phone number, email address or short text to show. Empty uses the website contact number, or the website email when there is no number. |
| Contact card link | Optional. Use tel:+15555550100, mailto:[email protected], a page path or a full address. Empty links a phone number or email automatically. |
| Option | What it does |
|---|---|
| Logo height | Height of the logo in pixels (16 to 120). The logo itself is uploaded in Settings → General (light and dark versions). |
| Header background / text / link hover | The colours of the header bar and its links in every layout. |
| Menu colors | Follow the header colors makes dropdowns, mega menus and the mobile menu use the header colours. Custom colors reveals three extra colour fields for the dropdown, mega menu and mobile menu backgrounds. |
| Sticky header | Keeps the header visible while the visitor scrolls. |
| Header shadow | Adds a soft shadow under the header. |
| Dark header | Uses the header’s dark variant while the site is displayed in dark mode. |
| Full width header | Contained aligns the header with the page content; Full width stretches it to the edges of the screen. |
| Header shape | Flat or Rounded corners for the header bar. |
| Open desktop submenus on hover | When on, dropdowns open when the pointer rests on a parent item; when off they open on click. |
Per-page differences
A single page can override the sticky header, header style, width, background, shadow and dark variant from its page settings, for example to place a transparent header over a hero image. See Pages.
On small screens every layout collapses into the same pattern: the logo, the icons and a menu button, and the navigation opens in a slide-in drawer that contains your logo, the header button and the menu. The Mobile menu background colour (under Custom menu colors) styles the drawer. The top bar is hidden on phones unless you switch on Show top bar on mobile.
On a phone the navigation opens in a drawer with your logo, the header button and the menu.
Any top-level menu item with children becomes a dropdown. An item can also be a mega menu with several columns, a heading, an image and a coloured or pictured background. You enable and style mega menus per item in the menu builder. The Navigation tab of Theme Options holds the defaults every mega menu starts from:
| Option | What it does |
|---|---|
| Mega menu width | Content width matches the menu items, Container width matches the page container (default), Full viewport spans the screen, Custom width uses your own value. |
| Mega menu custom width | The width used when the mode is Custom width, for example 960px. |
| Default mega menu columns | How many columns a mega menu has unless the item sets its own (2 to 6, default 4). |
| Submenu open delay (ms) | How long the pointer must rest on a parent before its submenu opens (0 to 1000; default 120). |
| Submenu close delay (ms) | How long a submenu stays open after the pointer leaves (0 to 1500; default 220), which stops menus closing while the pointer crosses a gap. |
Echo Theme Options · Top Bar · Menus · Pages · Website Templates