With the Flux theme, you can choose between a standard drop-down menu, a drawer-style menu, or a mega menu. Additionally, there are various options for the header layout.

Before exploring these options, you need to set up your first navigation menu. To do this, go to Content -> Menus in your store’s dashboard. Setting up a menu requires at least a few pages, products, or collections. Once you have these ready, you can begin adding them to your navigation menu.

For detailed instructions on adding, removing, or editing items in the navigation menu, refer to Shopify’s navigation menu guide.

Assign the menu

Now that your navigation menu is ready, go to Theme Customizer > Header.

At the top, you’ll find the Menu section, where you can select the menu you created to display in your header.

When you assign your menu you can start customizing the header’s appearance.

Desktop header layout

There are three different desktop header layouts you can choose from.

• Two rows: logo, search, and menu icons are in the top row, and the menu is centered in the second row.
• Menu-Logo-Icons: this is a single-row header with a centered logo, the menu on the left, and icons on the right
• Logo-Menu-Icons: a single-row header with a centered menu, logo on the left, and icons on the right

Mega Menu

The mega menu is often the preferred choice for online stores with a large inventory and numerous collections. To switch to the mega menu, go to Theme Customizer > Header and select Mega Menu from the Desktop Menu Type options.

By default, when the mega menu option is selected, only menu items with three levels (two submenu levels) will appear as a mega menu. All other items will display as a standard drop-down menu.

To apply the mega menu style to all menu items, check the ‘Apply mega menu to all menu items’ checkbox.

Mega promotion and mega image menu

The header section offers two block types: Mega Promotion and Mega Image Menu.

Mega Promotion Block: Use this block to create a promotional section within the mega menu, featuring a product, collection, or discount code. For detailed instructions, refer to the how-to guide.

Mega Image Menu Block: This block allows you to create a custom image menu with up to six items. For step-by-step guidance, see the how-to guide.

Alternative header

You can assign an alternative header style to certain pages, allowing the header to float over the first section. This option works particularly well when the first section features a large image.

It is commonly used on home and collection pages, where you can directly enable or disable the alternative header. To apply it to additional pages, use the ‘Custom pages’ selector.

You can also make the alternative header background transparent and adjust its distance from the top of the page for both desktop and mobile views.

Highlight a menu item

To highlight a top-level menu item, you can add a colored badge with custom text. Start by enabling the highlight feature by checking the ‘Enable menu item highlight’ checkbox. Then, set the badge text and choose its color.

Use the ‘Menu item highlight position’ drop-down to assign the badge to your desired menu item. Fine-tune its position using the range slider.

Other options

Sticky Header: Choose from three different sticky header behaviors or disable it entirely.

Color Options: Set the color scheme for the header and customize the colors for the menu highlight.

Desktop Layout: Adjust the top and bottom padding of the header to control its height.

Mobile Layout: Switch between two mobile header layouts and add up to two collections to your mobile menu.