Combo Header Nav
Using two widgets to create a header with a logo/link, heading, mobile navigation action tab and a navigation with one or two directories.
Header/Nav Combo
ThemeKit Block Combo Header/Nav
Two widgets are used to create a seamless header/nav - the ThemeKit Block Header and the ThemeKit Block Nav.
Both widgets have a full width container which can have a two color gradient with adjustable gradient angle.
NOTE: The header must be inserted first with the navigation below it.
ThemeKit Block Combo Header
The header widget inserts and styles the logo link, the heading and the mobile navigation action tab.
Logo
The logo has controls for setting its with above and below the break point and is configured as an internal link.
Heading
The h1 heading for the website name can use a Google hosted or non web safe font with a web safe fallback, It has controls for font size, mobile size, color, style, weight, letter spacing and for a adding a font shadow.
Action Tab
The tab has controls for icon color, background color and its opacity, padding and border radius. Increasing the padding reduces the relative size of the icon and vice versa.
ThemeKit Block Combo Nav
The widget creates a nav with any amount of top level links and one or two directories - each with up to eight links.
Directory Dropdowns
The directory tabs have a chevron down icon to show that they expand. This is styles using CSS and inserted using an ::after selector.
The dropdown has a control for setting its width and for adding a separator if required.
Mobile Nav
The mobile dropdown has a control for setting its width and shares the controls for inserting a separator.
ThemeKit Block 4 Column Footer
The design attempts to tidy up the usual mess of barely visible info at the bottom of most web pages. There's little point in trying to create a great design id it is ruined by the last item!
Icons
The icons are created using SVG code. The first three columns can have any of the 100s available in the ThemeKit Design download folder. The email, phone and scroll top icons are inserted by default.
Column [1]
The column has a heading and a text block plus a control for text align.
Column [2]
This column is for links which can be internal and/or external. They have controls for font size, color, hover color, background color and its opacity, text align, border with and radius and vertical spacing.
Column [3]
This can be used for location info. It has a heading and a text block with text align option.
Column [4]
This column has a spam protected email function and a smooth scroll to the top with adjustable scroll time.
The optional pnone number switches to a phone icon on mobile phones and places the call when tapped.
© Notice
The copyright notice spans all the columns and has an optional function to automatically add the year and keep it updated.