Main Menu Icons

The Main Menu Icons block is specific to the Titles Menu header design. Unlike other header types, this layout allows you to enhance the navigation visually by assigning icons or images to each main menu item.


You can add up to 20 individual blocks, each corresponding to a menu item (for example, Home, Shop, Blog, etc.). Every block has identical settings, ensuring a consistent look across the entire header.

Option

Values / Inputs

Description

Menu item blocks (#1–#20)

Up to 20 items

You can create up to 20 blocks, each representing one main menu link in the Titles Menu layout. Each block is managed separately, allowing full control over visuals for each item.

SVG icon

Upload or paste SVG code

Allows you to add a vector icon for the menu item. You can either upload an SVG file or paste the raw SVG code directly. SVG icons are resolution-independent, ensuring sharp, scalable visuals on all devices. Tip: Ensure that your SVG code includes proper width and height attributes for consistent sizing.

Image

Upload image file (PNG, JPG, or WebP).

60 x 60px .png with transparency recommended

Adds a custom image instead of an SVG icon. Use this if you prefer bitmap graphics, brand imagery, or unique icon styles. It’s recommended to use transparent PNGs for best results on colored backgrounds.

Usage Notes

  • The Main Menu Icons block appears only in the Titles Menu header type and is not available in other header designs.

  • You can freely mix SVG icons and images — for example, use SVGs for system icons (like “Search” or “Cart”) and images for promotional categories.

  • Icons and images are automatically aligned with the Titles Menu’s layout and adjust based on your selected Icons size setting in the header options.

  • To maintain consistency, use icons or images of similar proportions and visual weight across all menu items.

Last updated