Logo Navigation
Logo and responsive navigation with current page indicator
WidgetsLogo Navigation
The navigation is full width responsive with the links centered. If the optional log is unserted, the links align right. On mobile touch devices the navigation is replaced with a "hamburger" icon that opens a drop down navigation on click.
Logo
The optional logo appears at the top left and has a control for setting the image width. The logo can be configured as an internal link which would normally be to the home page.
Links
The link minimum width is adjustable and the link tabs can have their own background and be separated.
Current Page
The current page can be indicated using a contrasting color and an optional animated underline.
Overlay
As can be seen from the example above, the navigation can be inserted below a hero item and, by checking a box, be made to overlay it at the top,
Mobile Navigation
The mobile dropdown is operated via a "hamburger" tab which can be styled and fixed in position so that it always remains in view.
Footer
The footer can be either open on page load or hidden and opened/closed using the tab with the chevron icon.
For a toggle footer, check the box to show the tab and check the boxes to hide the footer and fix its position.
Layout
The footer has a grid layout with four columns …
Column [1] has a contact icon which is configured as an internal link and can open a page with a contact form.
Alternatively it can be a phone number that switches to an icon for placing calls when viewed on a mobile phone.
Column [2] has a text area for entering the company name and address etc. If the last line has the copyright info, the copyright year can be added by checking a bo which adds an auto update function.
The font family, size and color are shared by the phone number text and the info text. The text has controls for line hieght and text align.
Column [3] is an email icon. The email name, domain and domain extension are entered into separate boxes. The @ and the period are added using Javascript to prevent spammers using scrapng software from harvesting the email address.
Column [4] has a chevron up icon with a smooth scroll to the top function. The scroll time is set in milliseeconds.
Responsive
On devices with screen widths less than the break point the icons remain inline in row one and the text slides down to row 2.
Icon Styles
The icons are SVGs so their color and hover colorcan be changed. The show/hide tab has its own controls for color, background color and top border radius.