Combo Header & Nav [1]

Header & Nav

The Combo Header [1] and the Combo Nav [1] widgets are used together to create a page header with logo/link, main heading and the navigation.
On screen widths above the break point the navigation sits below the header and the links are inline. Below the break point which is set for tablets in landscape mode the navigation disappears to be replaced by an action tab with icon which is inserted at the right of the header. Tapping the tab drops the mobile version of the navigation.
Inline Navigation Menu
On screen widths above the break point the navigation links can be aligned left, center or right. There are controls the container background color and opacity and also for the link background color and opacity.
The links have a min width control and can be spaced out horizontally.
The current page link can be indicated using a different color for the link text.
Mobile Navigation Menu
The tab has controls for icon color, background color and opacity and for padding and border radius.
The background color and its opacity can be adjusted and there are controls for adding a link separator.

ThemeKit Combo Heading

Combo Text

This section of the page has six items using four combo widgets - Combo Heading, Combo Text, Combo Text in scroller mode, Combo List, Combo List in column mode with links and Combo Links.

Combo Text Scroll Mode

Combo

The ThemeKit combo widgets provide a simple solution for creating more elaborate layout. Breaking larger items down into separate modules makes setup a lot easier and faster.
Blocks that will be used several times in a web site layout can be setup on an "items" page to be copied and pasted as required.

Combo Text

The ThemeKit text widget allows many paragraphs or sections with headings using one widget. The container has an option for a main heading if required.

Blocks

Items are added using the EverWeb widget API Assets List - as many as required. Each item is an HTML <article> with a heading and text which can be supplemented with related links using the ThemeKit Cobo Links widget.

Combining Widgets

A typical scenario would be the need to have an item with a main heading, text, a list and some links. These can be stacked on the page to appear as one item when published.

Mark

The HTML <mark> tag is very useful and under used because it looks so nasty in its default rendering in the browser - black text on a yellow background.
The ThemeKit Combo Text widget has controls for styling it to blend in with the page design. The controls are for font color and the background color and its opacity.

Spans

Spans can be used for sub headings or to highlight text. They are inserted using span tags <span></span> and there are controls for setting their font size and color.

Scrolling

If a large amount of text is inserted the container height can be fixed and the overflow allowed to scroll both on computers and mobile touch devices
The maximum height can be set in pixels or - for better performance on responsive pages - in viewport units (vh).

Combo List

  • The ThemeKit Combo List has an optional heading and up to 48 list items
  • A tab can be added before the text with a choice of 16 different markers
  • List items and their marker can be configured as links
  • The markers have controls for size, color, background, padding and hover color and background.
  • The item below shows the list set up as column links.