Header Layouts
The Minis theme includes all header layouts used on the demo site. You can edit them or create your own layouts.
Cache note
After saving, the page may not immediately reflect your changes due to browser caching. Press Ctrl + F5 to force a refresh.
The 3x3 Grid
The theme divides the header into 3 rows, each with 3 columns, for 9 areas in total. You can add controls to each area.
Header Settings
Click the edit icon to open the header settings screen.
| Setting | Description |
|---|---|
| Header Position | Whether the header floats above the Banner or the page title |
| Sticky Header | Whether the header stays fixed at the top of the page when the page scrolls |
| Sticky Header Type | The display style of the Sticky Header |
Header (Top / Middle / Bottom) Area Settings
By default, the Header Top and Header Bottom areas are hidden. Click the eye icon to enable these two areas; you can also click the edit button to configure an area.
General
| Setting | Description |
|---|---|
| Row Height (px) | The height of the header area |
| Layout | The width of the header content area: Full Width or fixed width |
| Area Space (px) | The spacing between the left, center, and right columns |
| Distance Between Controls (px) | The distance between controls within a column area |
| Split Line Between Grids | Whether to show the separator lines between the grids |
| Setting | Description |
|---|---|
| Bottom Line | Whether to show the separator line at the bottom of each area |
| Setting | Description |
|---|---|
| Display Shadow | Whether to show the gray shadow at the bottom of each area |
| Setting | Description |
|---|---|
| Accent Color | The accent color of each area, usually the color of a control on hover or click |
| Setting | Description |
|---|---|
| Extra class name | Adds an extra CSS class name to each area |
Background Settings
Set a background color and background image for the header areas.
Typography
Set the typography of the header areas, such as font size, color, font family, and more.
Sticky Header
For each area, you can choose whether it appears in the Sticky Header and set the Sticky Header's style.
Header Column Settings
General
| Setting | Description |
|---|---|
| Column width | The width of the column |
| Arrangement | How the controls are arranged: Vertical or Horizontal |
| Text Align | The text alignment |
Design Options
Set padding, margin, borders, background color, and background image for a column.
Mobile Header Settings
Click the phone icon to switch to the settings screen for the mobile header layout. The mobile header is divided into three areas — left, center, and right — and you can add controls and Panes to each area.
Controls
Controls are custom modules built into the theme; you can drag and drop them anywhere.
Click the edit button next to a control to open the settings screen for all controls.
Logo Control
Use the Logo control to display the site's logo image in the header.
The Logo settings screen is divided into two parts: the main Logo settings and the Sticky Header Logo settings.
Main Logo
| Setting | Description |
|---|---|
| Source | The source of the logo image: the DNN site logo (set in Admin > Site Settings) or a custom logo |
| Logo URL | A custom logo image |
| High-DPI (retina) Logo URL | The logo displayed on high-DPI (Retina) screens; the image file name must end with the -2x suffix, for example logo-d-2x.png |
| Max Width | The maximum width of the logo |
| Max Height | The maximum height of the logo |
Sticky Header Logo
| Setting | Description |
|---|---|
| Source | The source of the logo image in the Sticky Header |
Horizontal Menu
Use the Horizontal Menu control to display the navigation menu in the header.
Its settings screen has three parts: Main Menu settings, Flyout Menu settings, and Mega Menu settings.
Main Menu
| Setting | Description |
|---|---|
| Menu Typography | The typography of the top-level menu (font size, color, font family, etc.) |
| Menu Item Spacing | The top, bottom, left, and right spacing of menu items |
| Setting | Description |
|---|---|
| Menu Hover Style | The appearance of a menu item on hover; 6 options are available |
| Setting | Description |
|---|---|
| Menu Item Hover Font Color | The text color of a menu item on hover |
| Menu Item Hover Accent Color | The accent color of a menu item on hover |
| Menu Item Border-width | The border width of menu items |
| Setting | Description |
|---|---|
| Menu Item Border-radius | The border radius of menu items |
| Display Middle Logo | Whether to display the logo in the middle of the menu |
Flyout Menu
| Setting | Description |
|---|---|
| Menu Typography | The typography of the flyout menu |
| Setting | Description |
|---|---|
| Display Shadow | Whether to show a shadow |
| Setting | Description |
|---|---|
| Background | The background of the submenus |
Mega Menu
To configure the Mega Menu content (width, position, columns, custom modules, etc.), see Mega Menu.
| Setting | Description |
|---|---|
| Menu Typography | The typography of the Mega Menu |
| Setting | Description |
|---|---|
| Menu Title Typography | The typography of the Mega Menu titles |
| Setting | Description |
|---|---|
| Display Shadow | Whether to show a shadow |
| Line Color | The color of the vertical separator lines |
Menu 3D Popup
Displays the menu with a 3D popup effect.
Menu 3D Popup Settings
| Setting | Description |
|---|---|
| Accent Color | The accent color |
| Background Color | The background color of the 3D panel |
| Brush Color | The color of the underline shown when you hover over a menu item |
| Sub Menu Color | The text color of the submenus |
| Line Color | The color of the line to the left of the submenus |
| Logo Source | The source of the logo |
| Bottom Text | The text at the bottom of the menu |
Popup Menu 2
Another popup menu style.
Popup Menu 2 Settings
| Setting | Description |
|---|---|
| Popup Background Color | The background color of the popup panel |
| Accent Color | The accent color |
| Right Text | The content on the right side of the popup panel |
Login User
Use the Login User control to display login and register links in the header.
The text color of the login user links can be set in Header Settings > Typography.
Search
Adds a search icon to the header; clicking it opens the search panel.
| Setting | Description |
|---|---|
| Placeholder | The default placeholder text of the search box |
| Color | The color scheme of the search panel: Dark or Light |
| Accent Color | The accent color |
Vertical Separator Line
Use the Vertical Separator Line control to display a vertical separator line in the header.
The color of the separator line can be set in Header Settings > Typography.
Text Box
Use the Text Box control to enter text or HTML code.
| Setting | Description |
|---|---|
| Text Box | The area for editing code |
Mobile Menu
The Mobile Menu control belongs to the mobile header.
Click the navigation (nav) icon of the mobile menu to open the menu.
| Setting | Description |
|---|---|
| Navbar Title | The text of the menu title |
| Level 1 Menu Typography | The typography of the top-level menu |
| Current Color | The text color of the currently selected menu item |