Header menus and mega menus
Header menus and mega menus in Seventh: add a menu, a mega menu with cards, or a custom link to the main row of the Header section.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The main navigation of the Header section is built from blocks inside its Main row. You can mix Menu, Mega menu and Link blocks in any order.
Where to find it: select Header at the top of the theme editor sidebar, open Main row, then select Add block and choose Mega menu, Menu or Link.
Menu, Mega menu and Link blocks
- Menu shows every top-level link of the selected Shopify menu in the main row. Links with child links open a dropdown, up to the three levels Shopify allows.
- Mega menu shows one item in the main row, labelled Menu title. It opens a panel below the header with columns of Menu blocks and cards (Card, Product card, Collection card, Article card).
- Link shows one link, optionally with an icon, and no dropdown.
These blocks appear only in the classic menu on desktop. On screens narrower than 1024 px, or with Menu Style set to Drawer, customers use the Navigation drawer section, which has its own menus.
The menus themselves (the links and their order) are created in Shopify, not in Seventh: Shopify admin → Content → Menus. See Shopify's help page Adding, removing, or editing menu items in your online store.
Setting up a mega menu
Create the menus in Shopify admin
Open Shopify admin → Content → Menus and create one menu per column you want, for example "Women: clothing" and "Women: accessories". Only the top-level links of each menu show inside a mega menu.
Add a Mega menu block
In the theme editor, open Header → Main row, select Add block and choose Mega menu. Enter the label in Menu title and, if the label should also be a link, set Link.
Choose the layout
Set Desktop columns, for example 4 columns or 25% 25% 50% when one column holds a large card.
Add the menus
Inside the Mega menu block, select Add block, choose Menu, select one of the menus from step 1 in Menu and enter an optional Heading. Repeat for each column.
Add cards
Select Add block again and choose a card, for example a Product card or a Card with an image and a button. Drag the blocks into the order of the columns.
Open the menu title in the preview to check the panel. If the panel content wraps into a second row, the number of blocks is larger than the number of columns.
Highlighting a menu item
- Set Background color and Text color under Highlight menu on that Menu, Mega menu or Link block. Transparent (the default) means no highlight.
- On a Menu block, the colors apply to every top-level link of that menu. To highlight one item, put it into its own Shopify menu and its own Menu block.
Why does my mega menu not show the submenus of a menu?
A Menu block inside a mega menu shows only the top-level links of its menu; child links are not shown. Create a separate Shopify menu for each column instead. For a classic dropdown, use a Menu block in the main row, not inside a mega menu.
Why is my mega menu cut off or crowded?
The panel has more columns of content than fit the screen width. Lower Desktop columns, choose a smaller Grid gap, or move some links into a second mega menu.
All Header menus and mega menus settings
Every setting on this page, one list per section or block, with its type and default.
Menu (menu picker, default: the main-menu menu): Sets the Shopify menu whose top-level links show in the main row. Links with child links open a dropdown.
Menu block: Highlight menu
Where to find it: Header → Main row → Menu → Highlight menu
Background color (color, default: transparent): Sets a background color that highlights every top-level link of this menu. Transparent means no highlight.
Text color (color, default: transparent): Sets the text color of the top-level links of this menu. Transparent uses the header text color.
Menu block: Submenus typography
Where to find it: Header → Main row → Menu → Submenus typography
Style (dropdown, default: Default): Sets whether the dropdowns of this menu use the default text style or the custom size, weight, case and opacity below. Options: Default, Custom.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge. Shown only when Style is Custom.
Text weight (dropdown, default: Normal). Options: Normal, Bold. Shown only when Style is Custom.
Case (dropdown, default: Default). Options: Default, Uppercase. Shown only when Style is Custom.
Reduced text opacity (checkbox, default: off). Shown only when Style is Custom.
Where to find it: Header → Main row → Mega menu.
Accepts these blocks: Menu, Card, Collection card, Product card and Article card.
Menu title (text field, default: "Mega menu"): Sets the label of this mega menu in the main row.
Link (link): Makes the menu title a link. Leave empty if the title should only open the panel.
Mega menu block: Layout
Where to find it: Header → Main row → Mega menu → Layout
Desktop columns (dropdown, default: Standard: 4 columns): Sets the column layout of the mega menu panel on desktop: 2 to 6 equal columns, or one of the uneven splits such as 25% 75% or 40% 20% 20% 20%. Each block inside the mega menu fills one column. Options: Standard: 6 columns, Standard: 5 columns, Standard: 4 columns, Standard: 3 columns, Standard: 2 columns, 2 columns variations: 75% 25%, 2 columns variations: 25% 75%, 2 columns variations: 34% 66%, 2 columns variations: 66% 34%, 3 columns variations: 50% 25% 25%, 3 columns variations: 25% 50% 25%, 3 columns variations: 25% 25% 50%, 4 columns variations: 40% 20% 20% 20%, 4 columns variations: 20% 20% 20% 40%, 4 columns variations: 20% 30% 30% 20%, 4 columns variations: 30% 20% 20% 30%.
Columns alignment (dropdown, default: Top): Sets how blocks of different heights line up in the mega menu panel. Stretch makes every column as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Grid gap (dropdown, default: Default): Sets the space between the columns of the mega menu panel. Options: Default, Small, Medium, Large, XLarge.
Mega menu block: Highlight menu
Where to find it: Header → Main row → Mega menu → Highlight menu
Background color (color, default: transparent): Sets a background color that highlights the mega menu title in the main row. Transparent means no highlight.
Text color (color, default: transparent): Sets the text color of the mega menu title in the main row. Transparent uses the header text color.
Where to find it: Header → Main row → Mega menu → Menu.
Heading (text field): Sets an optional heading above this menu column.
Menu (menu picker, default: the main-menu menu): Sets the Shopify menu shown in this column. Only its top-level links show; child links are not shown.
Menu block: Heading typography
Where to find it: Header → Main row → Mega menu → Menu → Heading typography
Font (dropdown, default: Body). Options: Body, Headings, Accent. Shown only when Heading is set.
Text size (dropdown, default: Heading 6). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Heading is set and either Font is Headings or Accent.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Heading is set and Font is Body.
Text weight (dropdown, default: Normal). Options: Normal, Bold. Shown only when Heading is set.
Case (dropdown, default: Default). Options: Default, Uppercase. Shown only when Heading is set.
Reduced text opacity (checkbox, default: off).
Menu block: Menu typography
Where to find it: Header → Main row → Mega menu → Menu → Menu typography
Font (dropdown, default: Body). Options: Body, Headings, Accent. Shown only when Menu is set.
Text size (dropdown, default: Heading 6). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Menu is set and either Font is Headings or Accent.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Menu is set and Font is Body.
Text weight (dropdown, default: Normal). Options: Normal, Bold. Shown only when Menu is set.
Case (dropdown, default: Default). Options: Default, Uppercase. Shown only when Menu is set.
Where to find it: Header → Main row → Link.
Text (text field, default: "Custom link"): Sets the label of the link in the main row.
Link (link).
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Select an icon (dropdown): To see all icons, visit the Krown icon library. Options: None, Business: Earth globe, Business: Flag, Business: Helpline, Business: Like hand, Business: Map marker, Business: Security shield, Business: Star, Commerce: Appointment, Commerce: Archive box, Commerce: Box, Commerce: Checkout cart, Commerce: Currency, Commerce: Delivery, Commerce: Delivery time, Commerce: Giftbox, Commerce: Label, Commerce: Open 24 hours, Commerce: Open box, Commerce: Paper bag, Commerce: Shipping truck, Commerce: Store, Commerce: Time, Commerce: Time limit, Commerce: Wallet.
Custom icon (image): Sets your own icon for the link instead of one from Select an icon. Use a transparent PNG of 72 x 72 px.
Link block: Highlight menu
Where to find it: Header → Main row → Link → Highlight menu
Background color (color, default: transparent): Sets a background color that highlights the link. Transparent means no highlight.
Text color (color, default: transparent): Sets the text color of the link. Transparent uses the header text color.
Related pages
- Header section: Main row settings such as Menu Style, Menu alignment and the main menu typography.
- Navigation drawer section: the menu customers see on mobile.
- Menu block: the Menu block used in sections and cards outside the header.
- Blank card: the Card block a mega menu can hold.
- Collection card: the Collection card a mega menu can hold.
- Product card: the Product card a mega menu can hold.
- Article card: the Article card a mega menu can hold.
Header
The Header section sets the Seventh store header: logo, style (standard, transparent, translucent), sticky behavior, icons, account and the top row.
Drawers group
The Drawers group in Seventh holds the navigation drawer, the search drawer and the cart drawer, the panels that slide in from the side of the screen.