Site navigation is an important element for visitor orientation. You have countless variations of header layouts to meet the exact needs and goals of the site. Bringing ambassadors an extension of header setup options.
At the beginning you have a choice of three types: Horizontal, Vertical and Button. Each header consists of a logo, a primary region (main navigation) and a secondary region (secondary navigation).
Horizontal header
With one click, you can select the appropriate layout of elements in the horizontal header view.
Another option is to limit the width of the header content to the width of the site content, including its background. The horizontal header can also be aligned to the bottom edge of the window for the introduction section.
Vertical header
Vertical header The header is placed at the edge of the page, you can choose whether it is on the left or right side.
Header as a button
The "Button" header type displays only the logo and the icon (button) to open the menu. In the design settings you can easily change the graphic form of the icon.
Mobile header
The header switches to the mobile version by a certain set point (breakpoint, default 641 px). The mobile version is enabled independently of the selected header type, so it is the same for each header type.
Again, the layout of elements, display or hide of additional regions and other behaviors can be influenced. You can set the appearance of the open menu in the Behaviour section.
Header behaviour
The appearance of the open mobile menu can look like the following:
- Ejecting the menu from right/left to a part of the screen, where the main content moves off the screen
- Overlay, where the menu is displayed full screen
- Ejecting the menu from the right or left, where the menu overlays the main content
Other header settings:
- Fixed header: the header can be pinned to the edge of the screen on both phone and desktop. The header remains fixed and the user can always see it even when scrolling.
- Slide-out effect: this effect hides the header when scrolling down. When scrolling up, the header will be shown as fixed again.
- Priority navigation: priority navigation is an automatically created submenu that groups menu items so that the menu does not overflow in its container. This is useful on medium-sized displays, where it is useful to display some of the menu items and no longer display the mobile menu.
- Show menu icon: this setting affects the breakpoint (in pixels) for displaying the mobile menu icon.
Submenu
If your navigation includes a second level, you can choose from two submenu views that appear when you hover over the parent item.
- Sub-items in 1 column
- Items next to each other in multiple columns in the bar below the header
Tip: Since version 2.53, you can also edit the colours of individual navigation elements, even when scrolling