# Header, Top Bar & Contact Drawer ## Header, Top Bar & Contact Drawer **Files:** `src/config/config.toml`, `src/config/menu.en.json`, `src/content/sections/english/home-header.md` · **Skill level:** Beginner The header has three parts: an optional **top bar** with contact details, the **navigation bar** (logo, menu, language switch, search, and the header button), and a **contact drawer** that slides in from the side. On small screens the menu folds into a menu button. ### Which Header Each Page Uses The header style is chosen by each route, so you don't pick it in a setting: | Page | Header | | ----------------------------------- | ---------------------------------------------------------------------- | | Main homepage (`/`) | Transparent over the banner, no top bar by default | | Corporate consulting (`/corporate-consulting/`) | Standard header with the slim "info" top bar | | Tax and accounting (`/tax-accounting/`) | Its own header with an announcement strip, phone number, and contact button | | Inner pages | Standard header with the "brand" top bar (logo and contact details above the menu) | What you control is the content of each part, below. ### The Top Bar Every top bar reads `[settings.headerTopBar]`: ```toml [settings.headerTopBar] enable = true # master switch for every top bar email = "info@example.com" # demo value: replace it phone = "+44-800 123 456" # demo value: replace it address = "" # empty uses home-header.md > address hours = "" # empty uses home-header.md > hours showAddress = true showEmail = true showPhone = true showHours = true showSocial = true # the enabled links in src/config/social.json showOfficeDropdown = true # the office list below [settings.headerTopBar.link] # highlighted link at the end of the "info" top bar enable = true label = "" # empty uses home-header.md > topBarLinkLabel url = "/contact/" ``` The style of the top bar for each header is set in `[settings.headerTopBar.layouts]`: | Key | Header | Values | | ----------- | -------------------------------- | -------------------------------------------- | | `default` | Inner pages | `"brand"` · `"info"` · `"none"` | | `home` | Main homepage | `"info"` · `"none"` | | `corporate` | Corporate consulting homepage | `"brand"` · `"info"` · `"none"` | | `service` | Tax and accounting homepage | `"announcement"` · `"info"` · `"none"` | - `"brand"`: the logo with contact details above the menu (a classic two-row header) - `"info"`: a slim strip with address, email, phone, hours, social links, the office list, and the highlighted link - `"announcement"`: a promotional strip. Its text and button are `serviceHeader.announcement` in `src/content/homepage/english/tax-accounting.md` - `"none"`: no top bar Top bars always scroll away with the page. Only the navigation bar can stick to the top (`stickyHeader` under `[settings]`). ### The Office List The **Our office** dropdown in the top bar: ```toml [settings.officeDropdown] enable = true label = "Our office" offices = [ { name = "United Kingdom", flag = "🇬🇧", url = "/contact/" }, { name = "Paris, France", flag = "🇫🇷", url = "/contact/" }, ] ``` The shipped list is sample data. Replace it with your offices, or set `enable = false` (or `showOfficeDropdown = false`) if you have one office. ### The Header Button ```toml [settings.navigationButton] enable = true label = "" # empty uses navigation.buttonLabel from src/i18n/en.json url = "/contact/" ``` To change the words in both languages, edit `navigation.buttonLabel` in `src/i18n/en.json` and `src/i18n/fr.json`. The tax and accounting header has its own button: `serviceHeader.contactButton` in `src/content/homepage/english/tax-accounting.md`. ### Search The header search button is hidden until you give it a destination: ```toml [settings.headerActions] exploreLabel = "" # empty uses navigation.search from the i18n files exploreUrl = "/search/" # empty hides search on every page enableOffcanvas = true ``` `/search/` is the included search page. It searches the titles and descriptions of blog posts, solutions, industries, people, careers, and portfolio projects in the visitor's language. Its labels are in `src/content/sections/english/search-section.md`. You can also point `exploreUrl` at another search service. ### The Contact Drawer The drawer opened from the round button at the right of the header shows your logo, a short description, your contact details, opening hours, social links, and a button: ```toml [settings.headerOffcanvas] enable = true logo = "" # empty uses the site logo description = "" # empty uses home-header.md on the homepage, or headerOffcanvas.description in the i18n files [settings.headerOffcanvas.button] enable = true label = "" # empty uses the translated label url = "/contact/" ``` Both `[settings.headerOffcanvas] enable` and `[settings.headerActions] enableOffcanvas` must be `true` to show it. The contact details come from `[settings.contactInfo]`, the hours from `[settings.contactInfo] hours` (or `home-header.md`), and the social links from the enabled entries in `src/config/social.json`. The mobile menu has its own button and keeps working when the drawer is off. ### Header Text In Content Files `src/content/sections/english/home-header.md` (and `french/`) holds the header text that is not a setting: ```yaml address: "London EC2A 4NE, United Kingdom" description: "..." # drawer description on the homepage officeTitle: "Head Office" contactTitle: "Contact Info" hours: "Sunday - Thursday | 9:00 AM - 6:00 PM" topBarLinkLabel: "Book a free consultation" ``` ### Menu Links And Language Switch The links and dropdown panels come from `src/config/menu.en.json` and `menu.fr.json`. See [Menus](/consultiz/customization/menus/). The language switch shows when more than one language is enabled ([Internationalization](/consultiz/customization/internationalization/)).