# Header Source: The Header is the top of every page: your logo or store name, the main menu, search, the customer account and the cart. It lives in the Header group of the theme editor, below the [Announcement bar](https://docs.ictsviluppo.example/dossier/sections/h-announcement-bar), and there can be only one. ## Change the logo The logo isn’t a setting of this section. Upload it in [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Logo and favicon**, so the same logo appears in the header and in the [Mobile menu](https://docs.ictsviluppo.example/dossier/sections/a-mobile-menu). If you leave it empty, the theme uses the logo from your store’s brand settings in the Shopify admin, and without either one it shows your store name as text, sized by **Store name size**. **Logo width** sets the width on computers and **Logo width on mobile** on phones. A tall, portrait logo is also limited in height, so it can’t make the header grow. Screen readers read the logo as your store name, and on the home page it is the page’s main heading. ## Choose the main menu and how it opens The menu is also a theme setting: choose it in [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Navigation > Main menu**, and edit its links in your Shopify admin under **Content > Menus**. The header shows up to three levels. **Main menu type** decides how the menu works on computers: - **Dropdown** opens a small panel under each top-level item that has children. - **Mega menu** opens a wide panel. When the item has a third level, its children become columns with their own links below. When it has only two levels, the links are listed and, if you haven’t added promotions for that item, the panel shows the images of up to four linked collections. - **Drawer** hides the menu behind a button and opens it from the side, as on phones. Items open with a click or a tap, not on hover. Each submenu starts or ends with a “View all” link, so the page of the top-level item stays reachable. When the items don’t fit on one row, the row scrolls sideways and arrows appear at its ends. On phones and tablets the menu is always behind the menu button, which opens the [Mobile menu](https://docs.ictsviluppo.example/dossier/sections/a-mobile-menu) section. If you remove that section from the Sidebars group, the button stops working. ## Arrange the logo and the menu **Desktop layout** puts the logo on the left or in the center, with the menu beside it or on a second row below. **Mobile logo position** does the same on phones. **Vertical spacing** sets the height of the header, and **Use full page width** stretches it to the edges of the screen instead of the page width set in theme settings. ## Add a promotion to the mega menu Add a **Mega menu promotion** block to show an image with a heading and a link inside the mega menu. Promotions appear only when **Main menu type** is **Mega menu**. **Main menu item position** says which top-level item the promotion belongs to: 1 is the first item from the start of the menu, 2 the second, and so on. An item shows up to two promotions when it has a third level, or up to three when it doesn’t; the rest are left out. You can add up to six promotions in all. - Leave **Link** empty to link the promotion to its menu item. - Without an image, the promotion shows only the heading and the link. - A promotion can appear only between two dates, for a sale or a new season: turn on **Schedule visibility** in the block. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling). ## Show search, account and cart as words or icons **Style** shows search, account and cart as words or as icons on computers. Phones always use icons. With words, **Cart count** shows the number of items as “Cart (2)” or “Cart 02”; with icons, the count is a bubble on the cart icon. - **Show search** adds a search field that suggests products, collections, pages and articles as customers type. Pressing Enter opens the search results page. - The account appears when customer accounts are turned on in your Shopify admin, under **Settings > Customer accounts**. It can’t be hidden from the theme, and Shopify draws it: a sign-in link for visitors, the customer’s avatar after they sign in. - The cart link opens the [Cart drawer](https://docs.ictsviluppo.example/dossier/sections/a-cart-drawer). Without the drawer it leads to the cart page. **Text case** applies to the menu, search, account and cart. ## Let customers change country or language **Show country/region selector** and **Show language selector** appear only when your store sells in more than one country or region, or has more than one language. The header shows them only on wide computer screens, where there is room for the full country name and currency. On smaller screens customers find them in the [Footer](https://docs.ictsviluppo.example/dossier/sections/f-footer) and in the [Mobile menu](https://docs.ictsviluppo.example/dossier/sections/a-mobile-menu), so keep them turned on there too. ## Keep the header visible while scrolling Under **Sticky header**, **Behavior** set to **Always** keeps the header at the top of the screen. **On scroll up** hides it while customers scroll down and brings it back as soon as they scroll up, which leaves more room for products. **None** lets it scroll away with the page. ## Show the header over the first image of the home page Turn on **Use on home page** under **Transparent header** to lay the header over the first section of the home page, with no background of its own. It works only when that first section is a [Slideshow](https://docs.ictsviluppo.example/dossier/sections/section-slideshow) or a [Rich text](https://docs.ictsviluppo.example/dossier/sections/section-rich-text) section with a background image or video. With any other first section, the header keeps its normal colors, so light text never ends up on a light background. The **Color scheme** under this heading uses only its text color: choose a scheme with light text for dark photos. As soon as customers scroll, the header takes back its normal color scheme. ## Change the colors **Color scheme** under **Colors** colors the header bar. **Main menu color scheme** colors what opens from it: dropdowns, the mega menu and the search panel. ## Settings | Setting | Type | Default | Options | | - | - | - | - | | **Logo** | | | | | **Logo width** | Slider | 140px | 50px–300px, step 10 | | **Logo width on mobile** | Slider | 100px | 40px–200px, step 5 | | **Store name size** — Applies when you don't upload a logo. | Drop-down | Medium | Small, Medium, Large | | **Layout** | | | | | **Desktop layout** | Drop-down | Menu left, logo center | Menu left, logo center, Logo left, menu center, Logo left, menu left, Logo left, menu below, Logo center, menu below | | **Mobile logo position** | Drop-down | Center | Left, Center | | **Vertical spacing** | Drop-down | Compact | Compact, Regular, Spacious | | **Use full page width** | Checkbox | On | — | | **Show divider** | Checkbox | On | — | | **Navigation** | | | | | **Main menu type** — Mega menu shows three menu levels in columns. Drawer opens the menu from the side on every screen size. | Drop-down | Mega menu | Dropdown, Mega menu, Drawer | | **Text case** — Applies to main menu, search, account, and cart. | Drop-down | Uppercase | Uppercase, Regular | | **Search, account, and cart** | | | | | **Style** — Mobile always uses icons. | Drop-down | Text | Text, Icons | | **Show search** | Checkbox | On | — | | **Cart count** — Applies to text style. Icons always use a bubble. | Drop-down | Two digits | In parentheses, Two digits | | **Country/region and language** | | | | | **Show country/region selector** — Shows when you sell in more than one country/region. To add a country/region, go to your market settings. | Checkbox | On | — | | **Show language selector** — Shows when your store has more than one language. To add a language, go to your language settings. | Checkbox | On | — | | **Sticky header** | | | | | **Behavior** | Drop-down | On scroll up | None, Always, On scroll up | | **Transparent header** | | | | | **Use on home page** — Applies when the first section of the home page is a slideshow, or rich text with a background. | Checkbox | Off | — | | **Color scheme** — Uses only the text color of the scheme. Choose a light text color for dark images. Shown when *Use on home page* is on | Color scheme | scheme-3 | — | | **Colors** | | | | | **Color scheme** | Color scheme | scheme-1 | — | | **Main menu color scheme** — Applies to dropdowns, mega menu, and search. | Color scheme | scheme-1 | — | ## Blocks ### Mega menu promotion Up to 6 per section. | Setting | Type | Default | Options | | - | - | - | - | | **Main menu item position** — Position of the top-level main menu item, starting from 1. Shows only with the mega menu type: up to 2 per item, or 3 when the item has no third level. Without promotions, the mega menu shows the images of the linked collections. | Slider | 1 | 1–12, step 1 | | **Image** — 600 x 750px recommended. | Image | — | — | | **Heading** | Text | New season | — | | **Link label** | Text | Shop now | — | | **Link** — Leave empty to link to the main menu item. | Link | — | — | | **Schedule** | | | | | **Schedule visibility** | Checkbox | Off | — | | **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — | | **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — |