Main menu

The Main Menu block is an essential part of the theme's navigation system, enabling users to create and customize the main navigation menu. It offers settings for managing menu items, displaying features, and adjusting layout options to enhance user experience. The block is designed to fit seamlessly within the design, providing a balanced and visually appealing navigation menu.

Key settings include options for linking lists, displaying a features bar, and managing layout and banner settings. Users can customize the background and foreground content of the banner, including image and icon selections, as well as button styles and layouts. Visibility settings ensure the menu is optimized for both desktop and mobile devices.

Practical usage examples include setting up a navigation menu that links to key pages, enhancing navigation with a banner to highlight promotions, and ensuring responsive design for a seamless user experience across all platforms. By leveraging these settings, users can create a dynamic and visually appealing navigation menu that enhances the overall functionality and aesthetics of their site.

Overview #

The Main Menu block is a crucial element of the theme's navigation system. It allows users to create and customize the main navigation menu, providing options to manage menu items, display features, and adjust layout settings to enhance the user experience.

Key components and functionality #

Main menu settings

The Main Menu block is designed to configure the main navigation menu, offering settings for linking lists, displaying feature bars, and managing layout options.

• Menu: This setting allows you to select the menu to be displayed. The default menu is main-menu.
• Show features bar: A checkbox to toggle the display of a features bar. The default setting is true.

Layout settings

These settings control the layout and appearance of the navigation menu, ensuring it fits seamlessly within the design.

• Fill available space: This option allows the menu to fill the available space, creating a balanced layout.
• Show centered block: This setting centers the block within the section on desktop. Only one block per section should have this enabled.

Banner settings

The banner settings enable you to add a banner to the navigation menu, enhancing its visual appeal and drawing attention to specific areas.

• Show banner: A checkbox to toggle the display of a banner within the navigation item.

Background settings

These settings manage the background appearance of the banner, allowing for customization to match the theme's aesthetics.

• Background image fit: Options include contain, cover, and default. The default setting is cover.
• Background image: Allows you to select an image for the banner background.
• Background image mobile: Select a different image for mobile devices.

Foreground content settings

These settings control the content displayed over the banner, providing options for alignment and icon usage.

• Horizontal alignment: Options include left, center, and right.
• Vertical alignment: Options include top, center, and bottom. The default setting is bottom.
• Icon: Allows you to add an icon to the banner content.

Button settings

These settings manage the appearance and functionality of buttons within the banner, offering various styles and layouts.

• Button style: Options include primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Options include icon left, icon right, and icon only.

Visibility settings

These settings determine the visibility of the block on different devices, ensuring optimal display across platforms.

• Visibility: Options include do not hide, hide on desktop, and hide on mobile. The default setting is do not hide.

Available in sections #

• Main navigation

Usage examples #

1. Creating a main navigation menu: Use the Main Menu block to set up a navigation menu that links to key pages on your site. Customize the menu by selecting different link lists and adjusting the layout settings to fit your design needs.

2. Enhancing navigation with a banner: Add a banner to your navigation menu to highlight promotions or important information. Use the background and foreground content settings to customize the banner's appearance and content.

3. Responsive design: Utilize the visibility settings to ensure your navigation menu is optimized for both desktop and mobile devices, providing a seamless user experience across all platforms.

By leveraging these settings, you can create a dynamic and visually appealing navigation menu that enhances the overall functionality and aesthetics of your site.