Navigation menu layouts

7 min

This topic describes:

how customer support sets up alternative HTML layouts

how to select alternative layouts in the navigation menu

how to edit alternative layouts using in-depth knowledge of HTML, CSS, and Velocity

navigation-menu-layouts.mdxTo receive up to five alternative layouts, contact customer support to set up alternative layouts.

To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used.

Note

In some cases, some text elements will not be in the order that you want.

To select a default layout or up to five alternative layouts, while editing a message in the Template Kit, on the left side of the preview, in the menu bar of the navigation menu, click Navigation Menu.

Image: Configuration window

Open the Options tab.

In the Layout area, in the Layout drop-down list, select the layout you want to use.

Image: Layout drop-down list

Click Apply.

You can edit alternative layouts but not the default layout.

Warning

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

In the preview on the left, click Settings.

Open the Navigation menu tab. Each layout has source text fields for the desktop, mobile, and text versions.

Image: Navigation menu tab

Edit the source text of the corresponding layout as needed. See Insert content to learn how to retrieve and place the various content items.

Note

Set up alternative layouts for mobile and text versions also. If no alternative layouts are created for these versions, the default layout is used.

Click Apply.

Access the content of the navigation menu using Velocity variables and format the transferred content using HTML style attributes.

The following Velocity variables are available:

Status. Information on current item paragraphs

Present. For using queries that check for the presence of an element

Value. For issuing the content

Notes for the creation of new layouts

Font definitions. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design.

Widths. Specify a fixed width or a width in percent. You should enter a percentage because this prevents elements from sticking out of the layout.

Danger of display errors. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings.

Status variables

Variable	Type	Description
$separatorDesktopEnabled	Boolean	Contains true if the Show vertical separator lines in desktop version check box in the Content section of the Separator lines tab is selected, otherwise false.
$separatorDisplayVerticalInMobileVersion	Boolean	Contains true if the Show vertical separator lines in mobile version check box in the Content section of the Separator lines tab is selected , otherwise false.
$separatorDisplayHorizontalInMobileVersion	Boolean	Contains true if the Show horizontal separator lines in mobile version check box in the Content section of the Separator lines tab is selected , otherwise false.
$hamburgerMenuEnabled	Boolean	Contains true if the Show check box in the General section of the Hamburger menu tab is selected, otherwise false.
$hamburgerMenuIconRounded	Boolean	Contains true if the Rounding contours check box in the Icon section of the Hamburger menu tab is selected, otherwise false.
$navigationItemsAmountValue	Integer	Contains the number of menu items that are displayed. Menu items are only displayed if a link and either the text or the image are specified.
$navCurrentParagraphId	Integer	Contains the ID of the respective navigation menu paragraph. This ID is particularly important for the mobile version, because the CSS classes use this ID as a suffix in the name.

Present Variables

Variable	Type	Description
$item1TextPresent – $item10TextPresent	Boolean	Contains true if there is content for the Text box in the Menu item # area, otherwise false.
$item1LinkUrlPresent – $item10LinkUrlPresent	Boolean	Contains true if there is content for the URL box in the Menu item # area, otherwise false.
$item1ImageUrlPresent – $item10ImageUrlPresent	Boolean	Contains true if there is content for the Image box in the Menu item # area, otherwise false.
$item1ColorPresent – $item10ColorPresent	Boolean	Contains true if there is content for the Text color box in the Menu item # area, otherwise false.
$item1BackgroundColorPresent – $item1BackgroundColorPresen	Boolean	Contains true if there is content for the Background color box in the Menu item # area, otherwise false.
$navigationLinkColorPresent	Boolean	Contains true if there is content for the Color box in the general settings under Font settings > Menu items in the navigation menu, otherwise false.
$separatorLayoutThicknessPresent	Boolean	Contains true if there is content for the Thickness box under Separator lines > Layout, otherwise false.
$separatorLayoutColorPresent	Boolean	Contains true if there is content for the Color box under Separator lines > Layout, otherwise false.
$hamburgerMenuMenuBarHeadlinePresent	Boolean	Contains true if there is content for the Heading box under Hamburger menu > Menu bar, otherwise false.
$hamburgerMenuMenuBarPaddingPresent	Boolean	Contains true if there is content for the Padding box under Hamburger menu > Menu bar, otherwise false.
$hamburgerMenuMenuBarBackgroundColorPresent	Boolean	Contains true if there is content for the Background color box under Hamburger menu > Menu bar, otherwise false.
$hamburgerMenuMenuBarImagePresent	Boolean	Contains true if there is content for the Image box under Hamburger menu > Image, otherwise false.
$hamburgerMenuMenuBarImageAltTextPresent	Boolean	Contains true if there is content for the Alternative text box under Hamburger menu > Image, otherwise false.
$hamburgerMenuMenuBarImageLinkPresent	Boolean	Contains true if there is content for the Link box under Hamburger menu > Image, otherwise false.
$hamburgerMenuIconColorPresent	Boolean	Contains true if there is content for the Color box under Hamburger menu > Icon, otherwise false.
$hamburgerMenuIconBackgroundColorPresent	Boolean	Contains true if there is content for the Background color box under Hamburger menu > Icon, otherwise false.
$navigationBackgroundImageUrlPresent	Boolean	Contains true if there is content for the URL box under Options > Background image, otherwise false.
$navigationItemDesktopBackgroundColorPresent	Boolean	Contains true if there is content for the Background color box under Options > Menu items, otherwise false.
$navigationItemDesktopWidthPresent	Boolean	Contains true if there is content for the Background color box under Options > Menu items, otherwise false.
$navigationItemDesktopPaddingPresent	Boolean	Contains true if there is content for the Padding box under Options > Menu items, otherwise false.
$navigationItemMobileWidthPresent	Boolean	Contains true if there is content for the Width box under Options > Menu items (mobile version), otherwise false.
$item1DisplayInMobileVersion – $item10DisplayInMobileVersion	Boolean	Contains true if the Show in mobile version check box under General > Menu item # is selected, otherwise false.

Value-Variables

Variable	Type	Environment	Description
$item1TextValue – $item10TextValue	String	Desktop, Mobile, Text	Contains the unformatted content of the Text box from the Menu item # area.
$item1TextFormattedValue – $item10TextFormattedValue	String	Desktop, Mobile	Contains the formatted content of the Text box from the Menu item # area.The text is formatted using the font settings from the general settings and the text color from the menu item itself.
$item1LinkUrlValue – $item10LinkUrlValue	String	Desktop, Mobile, Text	Contains the unformatted content of the URL box from the Menu item # area.
$item1LinkFormattedValue – $item10LinkFormattedValue	String	Desktop, Mobile	Contains the formatted content of the URL box from the Menu item # area.The text is formatted using the font settings from the general settings and the text color from the menu item itself.Note: If you have uploaded an image for the menu item and positioned it to the right or left of the text, the link is displayed including text and image.
$item1ImageUrlValue – $item10ImageUrlValue	String	Desktop, Mobile, Text	Contains the content of the Image box from the Menu item # area.
$item1ColorValue – $item10ColorValue	String	Desktop, Mobile	Contains the content of the Text color box from the Menu item # area.
$item1BackgroundColorValue – $item10BackgroundColorValue	String	Desktop, Mobile	Contains the content of the Background color box from the Menu item # area.
$navigationLinkColorValue	String	Desktop, Mobile	Contains the content of the Color box from the general settings > Font settings tab > Menu Items in the Navigation Menu area.
$separatorLayoutThicknessValue	String	Desktop, Mobile	Contains the content of the Thickness box from the Separator lines tab > Layout area.
$separatorLayoutColorValue	String	Desktop, Mobile	Contains the content of the Color box from the Separator lines tab > Layout area.
$hamburgerMenuMenuBarHeadlineValue	String	Mobile	Contains the unformatted content of the Heading box from the Hamburger menu tab > Menu bar area.
$hamburgerMenuMenuBarHeadlineFormattedValue	String	Mobile	Contains the formatted content of the Heading box from the Hamburger menu tab > Menu bar area.
$hamburgerMenuMenuBarPaddingValue	String	Mobile	Contains the content of the Padding box from the Hamburger menu tab > Menu bar area.
$hamburgerMenuMenuBarBackgroundColorValue	String	Mobile	Contains the content of the Background color box from the Hamburger menu tab > Menu bar area.
$hamburgerMenuIconPositionValue	String	Mobile	Contains the content of the Position box from the Hamburger menu tab > Icon area.
$hamburgerMenuIconColorValue	String	Mobile	Contains the content of the Color box from the Hamburger menu tab > Icon area.
$hamburgerMenuIconBackgroundColorValue	String	Mobile	Contains the content of the Background color box from the Hamburger menu tab > Icon area.
$hamburgerMenuMenuBarImageUrlValue	String	Mobile	Contains the content of the Image box from the Hamburger menu tab > Image area.
$hamburgerMenuMenuBarImageAltTextValue	String	Mobile	Contains the content of the Alternative text box from the Hamburger menu tab > Image area.
$hamburgerMenuMenuBarImageLinkValue	String	Mobile	Contains the content of the Link box from the Hamburger menu tab > Image area.
$navigationAlignmentValue	String	Desktop, Mobile	Contains the content of the Alignment box from the Options tab > Layout area.
$navigationBackgroundImageUrlValue	String	Desktop, Mobile	Contains the content of the Image box from the Options tab > Background image area.
$navigationBackgroundImageAlignmentValue	String	Desktop, Mobile	Contains the content of the Alignment box from the Options tab > Background image area.
$navigationBackgroundImageRepeatValue	String	Desktop, Mobile	Contains the content of the Repeat box from the Options tab > Background image area.
$navigationItemDesktopBackgroundColorValue	String	Desktop, Mobile	Contains the content of the Background color box from the Options tab > Menu items area.
$navigationItemDesktopWidthValue	String	Desktop, Mobile	Contains the content of the Width (desktop version) box from the Options tab > Menu items area.
$navigationItemDesktopPaddingValue	String	Desktop, Mobile	Contains the content of the Padding box from the Options tab > Menu items area.
$navigationItemDesktopAlignmentValue	String	Desktop, Mobile	Contains the content of the Text alignment box from the Options tab > Menu items area.
$navigationItemDesktopVerticalAlignmentValue	String	Desktop, Mobile	Contains the content of the Text position (next to the image) box from the Options tab > Menu items area.
$navigationItemImageBehaviorValue	String	Desktop, Mobile	Contains the content of the Image position box from the Options tab > Menu items area.
$navigationItemMobileWidthValue	String	Mobile	Contains the content of the Width box from the Options tab > Menu items (mobile version) area.
$navigationItemMobileAlignmentValue	String	Mobile	Contains the content of the Text alignment box from the Options tab > Menu items (mobile version) area.
$navigationItemMobileVerticalAlignmentValue	String	Mobile	Contains the content of the Text position (next to the image) box from the Options tab > Menu items (mobile version) area.

Navigation menu layouts