EverWeb ThemeKit

ThemeKit Row Icon Navigation

Those who keep up with modern web design trends will know that the "hamburger" navigation is not the best type of navigation to use, Studies have shown that web surfers are less likely to click through to other pages of the site when the navigation requires clickking the tab or opening dropdown menus.
In View
Navigation should always be in view if possible and one way to do this is to fix it in position. The problem with this method is that it then takes up valuable screen reak estate on small mobile devices.
The navioation shown on this page is fixed in position but will scroll out of site as the page content is scrolled. When the scroll direction is reversed - or the bottom of the page is reached - the navigation will reappear.
Horizontal Scroll
When the browser/device screen width becomes less than the width of the navigation the links disappear off to the right and are then scrolled into view.
Horizontal Scrollbar
Setting the overflow to scroll causes the browser to introduce a horizontal scrollbar. If this is not considered desirable it can be removed by checking a box.
Icons
The navigation icons can be SVGs (scaleable vector graphics), Font Awesome or SVG icons. Of the three SVGS are the best option Font Awesome is OK and PNG images are the least desirable choice.
Position
Since the navigation is fixed it would normally be hidden by the item below or cover it if it had a hight z-index. To prevent this the navigation has a clearfix added.
If the navigation is to overlay the top of an item like a hero image the clearfix can be removed by checking a box.
The default value for z-index is high enough for most purposes but can be increased if required.

Navigation Setup

The navigation can have up to 48 links. The links have a background color with adjustable opacity and a solid hover background color. The ison size is adjustable and the color can be changed if using SVG or Font Awesome icons.
The font used in this example is the Google hosted "Stint Ultra Expanded" with helvetica as the fallback. There are controls for font size, color, minimum width and tab border radius.
Current Page
This option is turned on by checking a box and the current page link has its own controls for background color and its opacity.
Internal/External Links
Follow the link below to find out how to create links using relative or absolute file paths. …

File Paths

Using SVGs

Using SVGs (scaleable Vector Graphic) for icons is much more efficient and creates better quality than PNG images or font icons like Font Awesome.
There are no images or large stylesheet to download. A folder of SVG icons is included in the ThemeKit Row download folder.
Select the required icon, double click it to open it in TextEdit.app set to plain text mode or a code editor, copy the code and paste it into the box in the widget settings.

Font Awesome

The widget uses V4 Font Awesome icons.. They are downloaded using the CDN by default. Those who have signed up with Font Awesome to get a user code can check a box and enter the ID number from their CSS link. This will automatically keep the icons up to date and make any new ones available.
Font icons are much more efficent than using PNGs but are much less efficient than using SVGs since they require a fairly large stylesheet with all the icons to be downloaded even if only a few are required.

PNGs

Using PNG image icons is not recommended since they require extra requests from the server and have a fairly large file size even for a small image.
The only good reason to use them is if they are custom made for a project or supplied by a client.