ThemeKit Design
Elegant & responsive web design straight out of the box!
Break out of the responsive row and let your imagination run free.
EverWeb Widgets
Logo SVG Links
The grid layout has an optional log/link and SVG icon links. On this page, the logo links are positioned absolutely to overlay the hero image and the links with the logo removed are fixed at the bottom.
The container has a maximum width setting to stop the items spreading out too much at wide browser widths.
Logo
The optional logo can use a PNG or an SVG. In this example the logo was converted to an SVG with a substabtial decrease in file size and better quality at any size. The logo is configured as an internal link and has a control for adjusting its width.
SVG Links
Links are created by inserting SVG code into the widget settings. The ThemeKit Design Project downloadfolder has 100s of icons to choose from.
Find the required icon, double click it to open it in TextEdit.app set to plain text mode or in a code editor, copy the code and paste it into the box provided.
Optional Links
There are options to add a spam protected email link and a smooth scroll to the top function with adjustable scroll time set in milliseconds.
The meail function has the name, domain and domain extension inserted in separate boxes and the @ and dot are inserted using Javascript to thwart spammers using scraping software.
Styles
The links have controls for setting the icon size, color, hover color and the horizontal and vertical spacing. The background color has a slider to adjust its opacity and it can be increased/decreased in height by adjusting the value for top/bottom padding.
Position
There are four options for position …
Relative - the navigation stays in its inserted position on the EverWeb design canvas and scrolls with the rest of the content.
Absolute - the links overlay the top item - in this casse the hero image - and scroll with the content.
Fixed - the links are fixed in position at the top or the bottom and always remain in view.
Spacer
The bottom links are fixed in position so if leaft alone they would partially cover the footer. In this example the ThemeKit Content Fade In widget is inserted below the footer widget and set at an appropriate height.