> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/group-sections/header-group/header.md). # Header The Header is the main navigation bar at the top of your store that appears on every page. It contains your logo, main navigation menu, search functionality, account access, and shopping cart. The header helps customers navigate your store, find products, and access their account. You can customize its layout, colors, menu styles, and add featured content to create a navigation experience that matches your brand and makes it easy for customers to find what they're looking for.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Header**. 3. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Layout * **Logo position**: Choose where your logo appears in the header. Options include "Middle left", "Top left", "Top center", or "Middle center". The logo position affects how your menu and other header elements are arranged. * **Mobile logo position**: Control where the logo appears on mobile devices. Choose "Center" or "Left" to match your mobile design preferences. * **Menu**: Select which navigation menu to display in the header. Create and manage menus in **Online Store > Navigation**. * **Menu type**: Choose how your desktop menu displays. "Dropdown" shows traditional dropdown menus, "Mega menu" creates a large menu with more space for links and content, or "Drawer" opens the menu in a side panel. * **Sticky header**: Control how the header behaves when scrolling. "None" keeps it static, "On scroll up" makes it appear when scrolling upward, "Always" keeps it fixed at the top, or "Always, reduce logo size" keeps it fixed but shrinks the logo for a more compact look. * **Separator line**: Add a line below the header to visually separate it from the content below. * **Separator line width**: Adjust the thickness of the separator line from 1px to 10px. * **Full width**: When enabled, the header stretches across the entire screen width instead of respecting your theme's page width settings. * **Bottom margin**: Control the space between the header and the content below it. Adjust from 0px to 100px. #### Color * **Color scheme**: Choose the color palette for the header background and text. This sets the overall appearance of your header. * **Menu color scheme**: Select a separate color scheme specifically for the menu dropdowns and mega menu. This lets you create visual distinction between the header and menu areas. #### Spacing * **Padding top**: Adjust the top padding of the header from 0px to 36px. This controls the vertical space inside the header. * **Padding bottom**: Adjust the bottom padding of the header from 0px to 36px. This works together with padding top to control the header's height. #### Menu Animations * **Menu Items**: Choose the animation style for menu items when customers hover over them. "Underline" adds an underline effect, "Fade" creates a background color fade, or "Fade + Underline" combines both effects. * **Underline and border thickness**: Control the thickness of menu item underlines and borders from 1px to 5px. This affects the visual weight of the hover effects. #### Menu items * **Menu items font size**: Set the font size for your main menu items. The size is relative to your theme's body text size, with options ranging from extra small to extra large. {% hint style="info" %} Size will depend on the [body font size](/docs/theme-settings/typography.md#settings) selected in general settings. Medium equals to the current settings. {% endhint %} * **Submenu items font size**: Control the font size for dropdown, mega menu, and drawer menu items. This lets you differentiate submenu text from main menu items. * **Highlighted submenu item font size**: Adjust the size of highlighted or featured submenu items. This is useful for drawing attention to specific menu sections. * **Uppercase Menu Items**: When enabled, all menu items, account text, and cart text appear in uppercase letters for a bold, consistent look. #### Utilities * **Country/region selector**: Display a dropdown that lets customers select their country or region. This is useful for international stores and helps customers see prices and shipping options for their location. * **Language selector**: Show a language selector dropdown for stores with multiple languages enabled. This allows customers to switch between available languages. * **Customer account avatar**: Display customer avatars in the account icon when customers are signed in with Shop. This personalizes the header experience for logged-in customers. #### Mega Menu * **Show Interior Separators**: Display divider lines between menu sections in the mega menu. This helps organize and separate different menu categories. * **Mega Menu Style**: Choose between "Grid" layout (organized in columns) or "Vertical" layout (stacked vertically) for your mega menu structure. {% hint style="info" %} The **Grid** layout organizes menu items in columns, creating a multi-column structure that displays submenu items side by side. This layout is ideal when: * You have many menu items or subcategories to display * You want to maximize horizontal space and show more links at once * Your menu structure has multiple levels that benefit from column organization * You want a traditional, organized mega menu appearance Grid layout works well for stores with extensive product catalogs or complex navigation hierarchies, as it allows customers to see more options without scrolling. {% endhint %} {% hint style="info" %} The **Vertical** layout stacks menu items in a single column, displaying submenu items one below another. This layout is ideal when: * You have fewer menu items or a simpler menu structure * You want a cleaner, more minimal navigation appearance * You prefer a linear, top-to-bottom reading flow * Your menu items have longer titles that need more horizontal space * You want a more focused, less overwhelming menu experience Vertical layout works well for stores with streamlined navigation or when you want to emphasize featured content alongside the menu items. {% endhint %} * **Show Featured Content**: Display featured content in the mega menu for first-level menu items. This can include images, products, collections, or blog posts. {% hint style="info" %} Select the content you want to display in the **Featured Content** settings {% endhint %} * **Show Related Content**: When enabled, displays related images (if available) for mega menu items on hover. This could be product images, collection images, or blog post featured images. Refresh the page after enabling to see changes. {% hint style="info" %} The **Related Content** will be displayed above the **Featured Content.** {% endhint %} #### Drawer * **Mobile drawer layout**: Choose how submenus appear in the mobile menu drawer. "Slide submenu" opens submenus in a sliding panel, while "Accordion submenu" expands submenus in place. * **Full width**: When enabled, the drawer menu takes up the full screen width on desktop when Menu type is set to Drawer. * **Desktop drawer layout**: Choose the layout style for the full-width drawer on desktop. Options are "Grid" or "Vertical". This only applies when Menu type is Drawer and Full width is enabled. * **Top-level menu item hover style**: Select the visual indicator for top-level menu items in the full-width drawer. Choose "Bar" for a horizontal line, "Dot" for a circular indicator, or "Fade" for a background color change. * **Show Featured Content**: Display featured content in the drawer menu for first-level items. This can help showcase products or collections directly in the menu. {% hint style="info" %} Select the content you want to display in the **Featured Content** settings {% endhint %} * **Show Related Content**: Display related images for drawer menu items when available. This only appears when Full width is enabled. {% hint style="info" %} The **Related Content** will be displayed above the **Featured Content.** {% endhint %} * **Show Interior Separators**: Display divider lines between sections in the drawer menu to help organize menu items. * **Social icons**: Show social media icons in the drawer menu. Note that social icons are not displayed in the full-width drawer. #### Featured Content * **Featured Content Size**: Choose the size of featured content displayed in menus. Options are "Small", "Medium", or "Large". * **Featured Content to show**: Select what type of content to feature in your menu. Choose "Custom Image", "Product", "Collection", "Blog", or "Article". * **Featured Content Image**: Upload a custom image to display in the mega menu or drawer. This is used when Featured Content to show is set to "Custom Image". * **Featured Product**: Select a product to feature in the menu. This is used when Featured Content to show is set to "Product". * **Featured Collection**: Choose a collection to display in the menu. This is used when Featured Content to show is set to "Collection". * **Featured Blog**: Select a blog to feature in the menu. This is used when Featured Content to show is set to "Blog". * **Featured Article**: Choose an article to display in the menu. This is used when Featured Content to show is set to "Article". * **Featured Content Position**: Control where featured content appears relative to the menu. Choose "Left" or "Right" positioning. * **Title Placement**: Decide where the title appears on featured content. "Over" places it on top of the image, while "Bottom" places it below the image. * **Title Alignment**: Choose where the title aligns on the featured content. Options include "Top Left", "Top Right", "Bottom Left", or "Bottom Right". * **Transparent Background**: Make the title background transparent when Title Placement is set to "Bottom". This creates a cleaner look over images. *** ### Blocks #### Featured Links The Featured Links block is a Header block that displays a link list as image cards (or simple text) in your mega menu or drawer menu. It turns menu links into visual cards with images and titles. **Settings:** * **Featured links list**: Select a link list to display as featured links in the header menu. These links appear with images and can help highlight important pages or collections. * **Title size**: Set the font size for featured link titles, ranging from H7 (smallest) to H3 (largest). * **Title weight**: Choose "Current" to use your theme's default font weight, or "Bold" to make titles stand out more. * **Title position**: Control how the title aligns on featured link images. Options are "Left", "Center", or "Right". * **Show image**: Toggle whether images are displayed for featured links. When disabled, only text links are shown. * **Image ratio**: Choose the aspect ratio for featured link images. Options are "Landscape" (wider), "Square", or "Portrait" (taller). {% hint style="info" %} The Featured Links block only works when you have a menu selected and when using Mega menu or Drawer menu types. It won't appear with Dropdown menus. The images are pulled automatically from the linked items, so ensure your products, collections, or pages have featured images set. {% endhint %} *** ### Tips * When using mega menus, keep menu items organized and limit the number of links to avoid overwhelming customers. * Featured content in menus works best when showcasing your most popular products or collections. * If you're using a sticky header, consider how it affects the overall page layout and ensure important content isn't hidden behind it. * The drawer menu is ideal for mobile-first stores or when you want a clean, minimal desktop header. * Keep menus short and clear. Use submenus for depth. * Enable Sticky header for long pages so navigation is always handy.