> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Configure the Facet header, menus and mega menu > Set the Facet header's menus, mega menu layout and cards, logo, transparent and sticky behavior, search style, and country and language selector. The Facet header sits at the top of every page. It holds your logo, the main menu with an optional mega menu, search, the customer account link and the cart. This page covers every header setting and the menu cards you can add to the mega menu. ![The Header section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=ba14b3332838ce14de484d679f3d2be6) ## What this section controls * The menus shown on desktop and in the mobile drawer. * The mega menu layout and the picture cards inside it. * The logo position, and an optional SVG logo. * Whether the header is transparent over a banner, and whether it stays at the top while scrolling. * The search icon or field, and the popular searches shown before typing. * The country and language selector. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Select the header** In the **Sections** panel on the left, click **Header** in the header group at the top. **3. Choose your menus** Pick the **Menu** for desktop. Optionally pick a separate **Mobile menu**. **4. Add menu cards** Under the header, click **Add block**, then **Menu card**, to show a picture card inside the mega menu. ![The theme editor with the Header section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=2d8371f1127e8754efec1862205230fc) > [!TIP] > > Menus are created in your Shopify admin under **Content**, then **Menus**. A menu item with sub-items opens a mega menu on desktop. ## Section settings ### Menus ![Theme editor sidebar showing the Header section settings: Menu, Mobile menu, Mega menu, Mega menu layout, Card image ratio, Image padding, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=83067932d9fb94518dd3cfd697ae7d09) * **Menu**: the menu shown in the header on desktop. Default: Main menu. * **Mobile menu**: the menu shown in the mobile drawer. Leave it empty to reuse the main menu. ### Mega menu ![The Facet header with the Swimwear mega menu open, showing its link columns and promo cards.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-megamenu.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=9661f625c54c0834d733efbd3ed1a066) > [accordion] Mega menu layout > > * **Columns with cards** (default): lists every sub-menu side by side, with menu cards next to them. > * **Side rail**: lists sub-menus on the left and reveals their links when the pointer moves over one. > [accordion] Card image ratio > > The shape of the pictures on menu cards: 1:1 (default), 4:5, 3:4, 2:3, 5:4, 4:3 or 16:9. > [accordion] Image padding > > The space between a card's edge and its picture: None (default), Small, Medium, Large or Extra large. Any padding shows the card color scheme around the picture. > [accordion] Card color scheme > > Colors the card buttons and, when the picture has padding, the card background. ### Logo and behavior ![Theme editor sidebar showing the Header section settings (part 2, scrolled): Card color scheme, Logo position on large screens, Use SVG code for logo, Logo SVG code.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-settings-2.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c2deece8d998cf4b35ef6808ab157aed) ![Theme editor sidebar showing the Header section settings (part 3, scrolled): Enable transparent header, Enable sticky header, Search, Search style, Popular searches menu, Search drawer color scheme.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-settings-3.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=bf2b11b7895b93634a8bb0b0b2677cac) > [accordion] Logo position on large screens > > **Left** or **Center** (default). On phones the logo is always centered, between the menu button and the icons. > [accordion] Use SVG code for logo > > Off by default. Turn it on and paste inline SVG code into **Logo SVG code** to use it instead of the logo image. > [accordion] Enable transparent header > > Off by default. Lets the first banner on a page move up behind the header. This only happens on pages that open with a hero banner, or with a page banner that has its own **Enable transparent header** setting turned on. Other pages keep a solid header. > [accordion] Enable sticky header > > On by default. Keeps the header at the top of the screen while shoppers scroll. > [!WARNING] > > SVG code you paste is placed on the page as it is. Only paste SVG files you trust, such as a logo exported by your designer. ### Search * **Search style**: **Icon** (default) opens a search drawer. **Search field** shows a search box in the header. * **Popular searches menu**: links shown in the search drawer before a shopper types. Each link is a suggested search. Default: Main menu. * **Search drawer color scheme**: the color scheme of the search drawer. ### Country and language ![Theme editor sidebar showing the Header section settings (part 4, scrolled): Search drawer color scheme, Country and language, Show country and language selector, Country and language color scheme, Customer account menu, Common settings.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-settings-4.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=804004359f70f7a3f55e372d1505a201) * **Show country and language selector**: on by default. The selector only appears when your store sells in more than one market or language. * **Country and language color scheme**: colors the panel that opens, and on phones the selector inside the menu drawer. Appears only when **Show country and language selector** is on. * **Customer account menu**: the menu shown to signed-in customers. Default: Customer account main menu. ### Common settings ![Theme editor sidebar showing the Header section settings (part 5, scrolled): Customer account menu, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-settings-5.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=0aa025647119882f50eb1a90190b4b56) * **Color scheme**: the colors of the header bar. * **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large. * **Page width**: Narrow, Narrower, Fluid (default) or Full. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. ## Blocks ### Menu card A menu card shows a picture with a label or button inside the mega menu, under one item of the main menu. You can add up to 8 cards. ![Theme editor sidebar showing the Menu card block (in Header) settings: Menu item, Image, Link, Card style, Menu card label, Alignment, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/header/header/header-block-menu-card-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=59414005d651fdb99f202a984f058819) > [tab] Content > > * **Menu item**: the name of the main menu item this card appears under. It must match the item's name (capitals and extra spaces are ignored). > * **Image**: the card picture. > * **Link**: where the card goes when clicked. > * **Card style**: **Label on the image** (default) or **Button under the image**. The other tabs list the settings for each style. > * **Show on**: **Desktop and mobile** (default), **Desktop only** or **Mobile only**. > [tab] Label on the image > > With **Card style** set to **Label on the image** (default): > > * **Menu card label**: the text shown over the picture. > * **Alignment**: Left, Center (default) or Right. > [tab] Button under the image > > With **Card style** set to **Button under the image**: > > * **Button label**: default "Shop now". > * **Full width button**: off by default. > * **Button alignment**: Left, Center (default) or Right. Appears only when the button is not full width. ## Best practices * **Keep the main menu short.** Five to seven top-level items fit on one line on most laptop screens. * **Match card names to the menu.** If a menu card does not appear, check that **Menu item** matches the menu item's name letter for letter (capitals don't matter). * **Use the transparent header with a strong picture.** Pick a **Header color scheme over this banner** on the hero banner so links and icons stay readable. ## Related guides > [card] [Hero banner](https://docs.shopify.lightsout.agency/themes/facet/sections/hero-banner.md) > > Set the header colors used over each slide. > [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md) > > Create the color schemes the header uses. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.