Header Layouts
The theme ships with every header layout used on the demo site. Edit them as they are, or create your own.
Browser cache
Saved changes may not show immediately because of browser caching. Press Ctrl + F5 to force a refresh.
The 9-Grid Area
The header is divided into 3 rows of 3 columns each — 9 cells in total. Add controls to any cell.
Header Settings
Click the edit icon to open the header settings.
| Setting | Description |
|---|---|
| Header Position | Whether the header floats above the banner or page title |
| Sticky Header | Whether the header stays fixed at the top while the page scrolls |
| Sticky Header Type | The look of the sticky header |
| Header Top / Middle / Bottom Settings | The top and bottom rows are hidden by default. Click the eye icon to enable them, or the edit button to configure them |
General
| Setting | Description |
|---|---|
| Row Height (px) | Height of the header area |
| Layout | Width of the header content: full width or fixed width |
| Area Space (px) | Spacing between the left, middle, and right columns |
| Distance Between Controls (px) | Distance between the controls inside a column |
| Split Line Between Grids | Show divider lines between cells |
| Bottom Line | Show a divider line at the bottom of each area |
| Display Shadow | Show the gray shadow under each area |
| Accent Color | Accent color of each area — generally the color used when controls are hovered or clicked |
| Extra class name | Append a custom CSS class to each area |
Background Settings
Set a background color and background image for the header area.
Typography
Set the text style of the header area — size, color, font family, and so on.
Sticky Header
Decide separately whether each header area appears in the sticky header, and set the sticky header's style.
Header Column Settings
General
| Setting | Description |
|---|---|
| Column width | Width of the column |
| Arrangement | How controls inside the column are arranged: vertically or horizontally |
| Text Align | Text alignment |
Background Settings
Set a background color and background image for the column.
Mobile Header Settings
Click the mobile icon to switch to the mobile header layout. The mobile header has left, middle, and right areas, each accepting controls and panes.
Controls
Controls are pre-built functional modules — drag them anywhere in the header.
Click the edit button next to a control to open its settings.
Logo
Displays your logo image in the header.
The settings page has two parts: the main logo and the sticky header logo.
Main Logo:
| Setting | Description |
|---|---|
| Source | Where the logo comes from: the DNN site logo or a custom logo. The DNN site logo is set in Admin > Site Settings |
| Logo URL | The custom logo image |
| High-DPI (retina) Logo URL | The logo for high-density screens. The file name must end with -2x, for example logo-d-2x.png |
| Max Width | Maximum width of the logo |
| Max Height | Maximum height of the logo |
Sticky Header Logo:
| Setting | Description |
|---|---|
| Source | Where the sticky header logo comes from |
Horizontal Menu
Displays the navigation menu in the header.
The settings are divided into three parts: the main menu, the flyout menu, and the mega menu.
Main Menu:
| Setting | Description |
|---|---|
| Menu Typography | Text style of first-level menu items — size, color, font family, and so on |
| Menu Item Spacing | Spacing around menu items, on all four sides |
| Menu Hover Style | The look of a menu item on hover — 4 styles to choose from |
| Menu Item Hover Font Color | Text color of the hovered menu item |
| Menu Item Hover Accent Color | Accent color of the hovered menu item |
| Menu Item Border-radius | Corner radius of menu items |
| Display Middle Logo | Show the logo in the middle of the menu |
Flyout Menu:
| Setting | Description |
|---|---|
| Menu Typography | Text style of the pop-up menu |
| Display Shadow | Show a shadow |
| Background | Background of the sub-menus |
Mega Menu:
| Setting | Description |
|---|---|
| Menu Typography | Text style of the mega menu |
| Menu Title Typography | Text style of the mega menu titles |
| Display Shadow | Show a shadow |
| Line Color | Color of the vertical divider lines |
Mega menu content
Which menus appear in the mega menu, how many columns it uses, and what custom content it holds are configured on the Mega Menu page.
Login User
Displays the login and register links in the header.
TIP
The text color of the login user is set under Header Settings > Typography.
Language
Displays the language selector in the header.
There are 7 display types:
| Type | Effect |
|---|---|
| Display Name | Display name |
| English Name | English name |
| Name | Name |
| Native Name | Name in the local language |
| Two Letter | Two-letter code (e.g. en) |
| Three Letter | Three-letter code (e.g. eng) |
| Flags | Flag icons |
Google Translate
Displays a Google Translate selector in the header so visitors can translate the page.
| Setting | Description |
|---|---|
| Default Language Text | Text shown for the default language |
| Google Translate Language | Add language options to the control |
Not available in edit mode
The control does not work while the page is in edit mode — view the page normally to see it.
Search
Displays a search box in the header.
| Setting | Description |
|---|---|
| Placeholder | Default hint text in the search box |
| Style | Look of the search panel |
| Accent Color | Accent color of the search control |
Vertical Separator Line
Displays a vertical divider line in the header.
TIP
The line's color is set under Header Settings > Typography.
Text Box
Enter text or HTML code.
| Setting | Description |
|---|---|
| Text Box | The editing area for text or code |
Mobile Menu
A control reserved for the mobile header.
Tapping the hamburger icon opens the menu.
| Setting | Description |
|---|---|
| Level 1 Menu Typography | Text style of level-1 menu items |
| Level 2 Menu Typography | Text style of level-2 menu items |
| Level 3 Menu Typography | Text style of level-3 menu items |
| Current Color | Text color of the currently selected menu item |