Global Options: Navigation

The Navigation group of Tirenoa › Options holds the tabs Menu, Logo & Favicon and Breadcrumbs. They style the menus of the header that Tirenoa builds from the global options, set the logo and the browser icons, and control the breadcrumb path.

If your site uses a header built as a Layout with the Builder, the menu and logo in that header are styled in the layout itself. In that case the Menu tab only shows a notice that its options are not available because a global header override is in use. The favicons and the breadcrumb options apply either way.

In this article: Menu: Main Menu · Menu: Flyout Menu and Secondary Top Menu · Menu: Mobile Menu · Menu: Legacy Mega Menu and Main Menu Icons · Logo & Favicon · Breadcrumbs · Related

Menu: Main Menu

The Menu tab is divided into six parts. Main Menu covers the top-level links and their dropdowns. Several rows depend on the header arrangement in use and are hidden when they do not apply.

Option	What it does
Main Menu Height	The height of the menu. Default: 94. The description shows the value that matches your logo height.
Main Menu Highlight Style	How active and hovered links are marked: Top Bar (default), Bottom Bar, Arrow, Background or Color Only. It also affects the look of the dropdowns.
Main Menu Highlight Background Color	Only shown for the Background style.
Main Menu Arrow Size	Width and height of the arrow. Default: 23px by 12px. Only shown for the Arrow style.
Main Menu Highlight Bar Size	Thickness of the bar. Default: 3. Only shown for the two bar styles.
Main Menu Item Padding / Main Menu Item Padding On Mobile	Right padding of the menu text (left on right-to-left sites). Defaults: 48 and 25. The mobile value applies when the desktop menu is used on mobile devices.
Main Menu Drop Shadow	Shows a shadow on dropdowns. Default: on.
Main Menu Dropdown / Legacy Mega Menu Animation	Animation of all sub-menus: Fade (default) or Slide.
Main Menu Dropdown Top Border Size	Top border of dropdowns and legacy mega menus. Default: 3. Only shown for the two bar styles.
Main Menu Dropdown Width	Width of the dropdown. Default: 200.
Main Menu Dropdown Item Padding	Top and bottom padding of dropdown items. Default: 12.
Main Menu Dropdown Divider	Shows a divider line on dropdown items. Default: off.
Main Menu Dropdown Indicator	Arrow indicators next to menu items with children: Parent, Parent + Child or None (default).
Main Menu Search Icon	Shows the search icon in the main menu. Default: on.
Main Menu Search Layout	Drop-Down or Menu Overlay (default). Only shown when the search icon is on.
Main Menu Icon Circle Borders	Shows a circle border on the cart and search icons. Default: off.
Menu Highlight Label Radius	Border radius of all menu highlight labels. Default: 2px.
Main Menu Dropdown Background Color, Background Hover Color, Separator Color	The three colors of the main menu dropdown.
Main Menu Background Color For Header 4 & 5	Background color of the main menu when header 4 or 5 is used. Only shown for those two header arrangements.
Menus Typography	Under Main Menu Typography: font family, weight, size, letter spacing, color and text transform of the top-level items. Uses typography set 3 by default.
Main Menu Text Align	Left, Center (default) or Right, for top headers 4 and 5 and for side headers.
Main Menu Font Hover/Active Color	Color of hovered and active menu text, of the highlight bar and of the dropdown border.
Main Menu Dropdown Font Color / Main Menu Dropdown Font Size	Color and size of dropdown text. Default size: 14px.

Menu: Flyout Menu and Secondary Top Menu

Flyout Menu styles the full-screen menu that opens from an icon. Its options are only shown when the header uses the flyout arrangement or when Mobile Menu Design Style is set to Flyout; otherwise a notice says that your setup does not use the flyout menu. Secondary Top Menu styles the small menu in the bar above the header and is only shown for header arrangements that have that bar.

Option	What it does
Flyout Menu Icon Font Size / Flyout Menu Icon Padding	Size and right padding of the flyout menu icons. Defaults: 20px and 32.
Flyout Menu Icon Color / Flyout Menu Icon Hover Color	Colors of the flyout menu icons.
Flyout Menu Background Color	Background of the opened flyout menu.
Flyout Menu Direction	Where the flyout menu starts from: Fade (default), Left, Right, Bottom or Top.
Flyout Menu Item Padding	Space between flyout menu items. Default: 32.
Secondary Menu Dropdown Width	Width of the secondary menu dropdown. Default: 200.
Secondary Menu Divider Color	Divider color of the first level of the secondary menu.
Secondary Menu Dropdown Background Color, Background Hover Color, Separator Color	The three colors of the secondary menu dropdown.
Secondary Menu Font Size / Secondary Menu Line Height	Under Secondary Top Menu Typography. Defaults: 12px and 48px.
Secondary Menu Font Color, Dropdown Font Color, Dropdown Font Hover Color	Text colors of the secondary menu and its dropdown.

Menu: Mobile Menu

Mobile Menu styles the menu shown below the header breakpoint. The options are only shown while Responsive Design on the Responsive tab is on; otherwise a notice asks you to enable it.

Option	What it does
Mobile Menu Design Style	Classic (default), Modern or Flyout. The flyout style only shows parent level menu items.
Mobile Menu Icons Top Margin	Top margin of the icons in the modern and flyout styles. Default: 2. Hidden for Classic.
Mobile Menu Dropdown Item Height	Height of each dropdown menu item. Default: 42. Hidden for Flyout.
Mobile Menu Dropdown Slide Outs	Lets dropdown sections slide out when tapped. Default: on. Hidden for Flyout.
Display Mobile Menu Search Icon/Field	Shows the search icon or field in the mobile menu. Default: on.
Mobile Menu Sub-Menu Indicator	Shows the sub-menu indicator “-“. Default: on. Hidden for Flyout.
Mobile Header Background Color / Mobile Archive Header Background Color	Header background on mobile devices, for normal pages and for archive pages.
Mobile Menu Background Color, Background Hover Color, Border Color, Toggle Color	Colors of the mobile menu dropdown, the classic menu box and the toggle icon. Hidden for Flyout.
Mobile Menu Typography	Font family, size, weight, line height, letter spacing, color and text transform of the mobile menu.
Mobile Menu Hover Color	Hover color of a mobile menu item; also marks the current item.
Mobile Menu Text Align	Left (default), Center or Right. Hidden for Flyout.

Menu: Legacy Mega Menu and Main Menu Icons

Legacy Mega Menu styles the older, column-based mega menu of the built-in header. Its options are only shown while the Legacy Mega Menu switch on the Features tab (Advanced group) is on; it is off by default. For new sites the tab itself recommends Mega Menus built in the Library instead. Main Menu Icons applies to the icons of top-level menu items only; dropdown icons follow the dropdown font size and color.

Option	What it does
Legacy Mega Menu Wrapper Max Width	Site Width (default), 100% Width or Custom Width.
Legacy Mega Menu Max-Width	The width in pixels. Default: 1200. Only shown for Custom Width.
Legacy Mega Menu Interior Content Width	For full-width mega menus: whether the content inside is held to Site Width or uses 100% Width (default). Only shown for 100% Width.
Legacy Mega Menu Column Title Size	Font size of the column titles. Default: 18px.
Legacy Mega Menu Dropdown Item Padding	Top and bottom padding of the items. Default: 7.
Legacy Mega Menu Item Divider	Shows a divider between items. Default: off.
Main Menu Icon Position	Top, Right, Bottom or Left (default) of the menu text.
Main Menu Icon Size	Size of the top-level menu icons. Default: 14.
Main Menu Icon Color / Main Menu Icon Hover Color	Colors of the top-level menu icons.
Mega Menu Thumbnail Size	Width and height of top-level mega menu thumbnails. Default: 26px by 14px; use “auto” for one of the two to keep the proportions. Only shown while Legacy Mega Menu is on.

Logo & Favicon

The Logo & Favicon tab holds the logo files for the built-in header and the icons browsers and devices show for your site. Each retina logo should be exactly twice the size of its normal version and is only offered once the normal version is selected.

Option	What it does
Logo Alignment	Left (default), Center or Right. Center only works on header 5 and on side headers.
Logo Margins	Top, right, bottom and left margin of the logo. Default: 34px top and bottom, 0px left and right.
Logo Background / Logo Background Color	Shows a colored background behind the logo and sets its color. Default: off. Only available for some header arrangements.
Logo Custom Link URL	The address the logo links to. Leave empty to link to the home page.
Default Logo / Retina Default Logo	The logo image and its version for high-resolution screens.
Sticky Header Logo / Retina Sticky Header Logo	A separate logo for the sticky header. Empty by default.
Mobile Logo / Retina Mobile Logo	A separate logo for mobile devices. Empty by default.
Favicon	The icon in the browser tab, at 32px x 32px or 64px x 64px.
Apple Touch Icon	The icon for Apple iOS devices, at 180px x 180px.
Android Devices Icon	The icon for Android-based devices, at 192px x 192px.
Microsoft Edge Icon	The icon for Microsoft Edge browsers, at 270px x 270px.

Breadcrumbs

The Breadcrumbs tab controls the path that shows visitors where a page sits in the site. If an SEO plugin with its own breadcrumb function is active, the tab shows a notice that the plugin’s output replaces the one of Tirenoa.

Option	What it does
Breadcrumbs on Mobile Devices	Shows breadcrumbs on mobile devices. Default: off.
Breadcrumbs Prefix	Text in front of the breadcrumb path. Empty by default.
Breadcrumbs Home Anchor Text	The text of the home link. Leave empty for the translatable default “Home”.
Breadcrumbs Separator	The character between two breadcrumbs. Default: /
Breadcrumbs Font Size	Font size of the breadcrumb text, in px or em. Default: 14px.
Breadcrumbs Text Color / Breadcrumbs Text Hover Color	Color of the breadcrumb text, normal and on hover.
Breadcrumbs Prefix Color, Breadcrumbs Current Page Color, Breadcrumbs Separator Color	Separate colors for the prefix, the current page and the separator. Leave empty to use the text color.
Post Categories/Terms on Breadcrumbs	Shows the categories or terms of a post in the path. Default: on.
Post Type Archives on Breadcrumbs	Shows post type archives in the path. Default: off.
Post Name on Breadcrumbs	Shows the name of the post itself at the end of the path. Default: on.