Appearance

Header Layouts ​

This theme includes all the header layouts used on the demo site. You can edit them, and also create your own layouts.

Cache reminder

Since browser cache exists, your page probably won't display the setting result properly after saving. Press Ctrl + F5 to refresh the page.

Header Layouts

9 Grids Area ​

We divide the header into 3 rows, and every row has 3 columns. You can add controls to every row.

3 rows × 3 columns

Header Settings ​

Clicking the edit icon goes to the header settings interface.

Header settings entry

Header Position ​

Set whether to float the header above the banner or the page title.

When you scroll down the page, the header will remain fixed at the top of the page.

Sticky Header Type ​

Set the display style of the sticky header.

Header (Top / Middle / Bottom) Settings ​

By default, the header top and header bottom are hidden. You need to click the eye icon to enable these 2 areas; you can also click the edit button to set them.

Enable the Top / Bottom areas

General ​

  • Row Height (px) — set the height of the header area
  • Layout — set the width of the header content area: full width or fixed width
  • Area Space (px) — set the spacing between the left, middle and right columns
  • Distance Between Controls (px) — set the distance between the controls of a column area
  • Split Line Between Grids — set whether to display the split line between every grid

Split Line Between Grids

  • Bottom Line — set whether to display the split line at the bottom of every area

Bottom Line

  • Display Shadow — set whether to display the gray shadow at the bottom of every area

Display Shadow

  • Accent Color — set the accent color of every area; in general it is the color when you hover or click the controls

Accent Color

  • Extra class name — add extra CSS to every area

Design Options ​

You can set the padding, margin, border, background color and background image for the header area.

Design Options

Typography ​

You can set the text style of the header area, such as text size, color, font family and so on.

Typography

Sticky Header ​

You can set whether to display the header area in the sticky header individually, as well as the style of the sticky header.

Sticky Header settings

Header Column Settings ​

General ​

  • Column width — set the width of the columns
  • Arrangement — set the arrangement of the controls: vertical or horizontal display
  • Text Align — set how to align text

Design Options ​

You can set the padding, margin, border, background color and background image for columns.

Mobile Header Settings ​

Click the mobile icon to switch to the setting interface of the mobile header layout. The mobile header is divided into left, middle and right areas — you can add controls and panes to the areas separately.

Mobile header settings

Controls ​

The controls are custom-built modules — you can drag them wherever you want.

Drag controls

You can go to the setting interface of all controls by clicking the edit button beside them.

Control settings

With the Logo control, you can display the logo image in the header.

Logo control

There are 2 areas included in the setting interface of the logo: the settings for the main logo and the settings for the sticky header logo.

Logo settings

  • Source — set the source of the logo image: the DNN site logo or a custom logo. The DNN site logo needs to be set in Admin > Site Settings
  • Logo URL — set the custom logo image
  • High-DPI (retina) Logo URL — set the logo image on HD screens. There has to be a -2x suffix at the end of the image name, such as logo-d-2x.png
  • Max Width — the maximum width of the logo
  • Max Height — the maximum height of the logo
  • Source — set the source of the logo image

Horizontal Menu ​

With the Horizontal Menu control, you can display a menu in the header.

Horizontal Menu control

There are 3 areas included in the setting interface of the Horizontal Menu: the settings of the main menu, the settings of the flyout menu, and the settings of the mega menu.

Horizontal Menu settings

  • Menu Typography — set the text style of the 1st level menus: text size, color, font family and so on
  • Menu Item Spacing — set the spacing between items at the top, bottom, left and right

Menu Item Spacing

  • Menu Hover Style — set the appearance style of the menu on hover; there are 6 styles to choose from

Menu Hover Style

  • Menu Item Hover Font Color — set the text color of the menu on hover
  • Menu Item Hover Accent Color — set the accent color of the menu on hover
  • Menu Item Border-width — set the border width of menu items

Menu Item Border-width

  • Menu Item Border-radius — set the border radius of menu items
  • Display Middle Logo — set whether to display the logo in the middle of the menus

Display Middle Logo

Flyout Menu ​

  • Menu Typography — set the text style of the pop-up menu

Flyout menu typography

  • Display Shadow — set whether to display shadow

Flyout menu shadow

  • Background — set the background of sub-menus

Mega Menu ​

  • Menu Typography — set the text style of the mega menu

Mega menu typography

  • Menu Title Typography — set the text style of the title

Menu title typography

  • Display Shadow — set whether to display shadow

Mega menu shadow

  • Line Color — set the color of the vertical split line

TIP

For choosing the mega menu type and its detailed settings, see Mega Menu.

Display the menu in 3D popup mode.

Menu 3D Popup

  • Accent Color — set the accent color
  • Menu 3D Popup Settings — set the background color of the 3D panel
  • Brush Color — set the color of the underline when hovering menu items
  • Sub Menu Color — set the text color of sub-menus
  • Line Color — set the color of the line on the left side of sub-menus
  • Logo Source — set the logo
  • Bottom Text — set the text at the bottom of the menu

Popup Menu 2

  • Popup Background Color — set the background color of the popup panel
  • Accent Color — set the accent color
  • Right Text — set the content on the right side of the popup panel

Login User ​

With the Login User control, you can display the login and register links in the header.

Login User control

The text color of Login User can be set in Header Settings > Typography.

Add a search panel to the header. The search panel pops up once the icon is clicked.

Search control

  • Placeholder — the default text of the search box
  • Color — set the color of the search panel to dark or light
  • Accent Color — accent color

Vertical Separator Line ​

With the Vertical Separator Line control, you can display the vertical split line in the header.

Vertical Separator Line control

The color of the Vertical Separator Line control can be set in Header Settings > Typography.

Text Box ​

With the Text Box control, you can input text or HTML code.

Text Box control

  • Text Box — the area for editing code

Text Box editing

Mobile Menu ​

The Mobile Menu control is part of the mobile header controls.

Mobile Menu control

Clicking the nav icon of the mobile menu pops up the menu.

Mobile Menu popup

  • Navbar Title — set the text of the menu title
  • Level 1 Menu Typography — set the text style of level 1 menus
  • Current Color — set the text color of the current menu item