Placement
TheDock supports three positions for your Header:
- Top: The Header will expand across the full width of the screen, just like any Section. The Height is defined by the height of the Logo and the Padding options.
- Left: The Header will expand to the full height of the screen and align to the left edge
- Right: The Header will expand to the full height of the screen and align to the right edge
If Placement is not Top:
Side Header Layout
You can define the positioning of the contents of your Header by one of three options:
- Spread: The Logo and the Main Menu will expand to be positioned with as much space in between as possible
- Top: The Logo and the Main Menu will both be aligned to the top of your Header
- Center: The Logo and the Main Menu will both be aligned to the center of your Header
Padding
Define the Padding of your Header.
Color
You can use any of the colors in your Color Palette as the background color of your Header. The text color will automatically adjust to a contrasting color, also from your Palette.
If Placement is Top:
Header Width
The contents of the Header can be set to either cover the Full width of the screen or to any of your Page Width settings defined in Design > Advanced Spacing.
Header Alignment
If your Header Width is not set to Full, you can set its’ horizontal Alignment to Left, Center or Right.
Logo Width
Define how many columns of your 12 column grid the Logo should use. Note that this only defines the width of the element surrounding the Logo, the Logo size is defined by setting the Logo Height.
Logo Alignment
Align your Logo within its’ surrounding element.
Main Width
Define how many columns of your 12 column grid the Main Menu should use.
Main Alignment
Align your Menu items within their surrounding element.
Items Width
You can set each Menu Item to a fixed column width (1 to 12) to align your Items with your grid or let each Item have their automatic width.
If Items Width is not Auto:
Items Horizontal Alignment
Define the Horizontal Alignment of the text within a Menu Item
Items Vertical Alignment
Define the Vertical Alignment of the text within a Menu Item
Items Spacing
Define the Spacing between Menu Items
Horizontal Padding
Define your Header Horizontal Padding, the range of options are: None, Small, Normal, Large and Huge, based on the Grid Spacing settings in Advanced Spacing
Hide Header on Scroll Down
Define whether the Header should slide away as you Scroll Bown the page. It will automatically re-appear on Scroll Up.
Color
You can use any of the colors in your Color Palette as the background color of your Header. The text color will automatically adjust to a contrasting color, also from your Palette.