ThemeKit Chameleon
Vertical Navigation
EverWeb Widgets
Navigation
If you want to ensure click through to other pages of your website research has shown that the best type of navigation is a vertical block of links inserted at the right side of the browser/device window.
Chameleon Navigation
The navigation appears as vertical on browser widths above the break point and is replaced by a chameleon tab below the break point. The tab has a "hamburger" style icon when the navigation is closed and an "X" when it is open.
Position
To make it as versatile as possible the navigation can be positioned left or right and can either be fixed in position or scroll with the content.
This applies to both above and below the break point so, for example, the navigation can scroll with the content when viewed on computers and be fixed to always remain in view on mobile devices.
Links
The navigation can have any amount of links both internal and external with a new window option. When there are a large amount of links and the page is viewed on a mobile phone any overflow will scroll so that the links can be viewed without having to scroll down the page.
Link Styles
The links have controls for font family, web safe fallback font, a checkbox for Google hosted fonts, font size, color, hover color, padding top/bottom and left/right and a control for spacing them out vertically.
Current Page
The current page link taext has a control to set its color different to the other links. Note that this color is not visible when viewed on the EverWeb design canvas but will show when in preview mode or the published page
Mobile Tab
The tab has controls for setting the icon color, the background color and opacity and the border radius. It can be psoitioned left or right and has controls for fine tuning its position om the X and Y-axis.
Setup
Since the navigation's position is either absolute or fixed it can be inserted ut of the way as the last item on the page below the footer widget.
Page Layout
The widgets used on this page are the ThemeKit Hero Image, ThemeKit Logo Heading, the ThemeKit Text Module, ThemeKit Content Fade In, the ThemeKit Info Footer and the ThemeKit Chameleon Navigation.
The hero image is inserted first followed by the heading widget which is set to overlap the hero at the top.
The rest of the widgets are inserted in the order they are seen except for the navigation which is inserted belwo the footer.