Overlay Header
The header has responsive width and a fixed height. A separate height can be set for mobile phones or the banner can be set to viewport height to fill the browser or device window no matter what size it is.
It loads a different size of image for each device type - computer, tablet and phone to improve efficiency and download speed.
Overlay
The translucent overlay covers 50% of the image when viewed on computers and tablets in landscape mode. It has options for a logo, an h1 and an h1 heading and a CTA style link. The link can be configured to open internal or external pages and in a new window if required.
The overlay can be switched to the right hand side of the image if needed and becomes full width when viewed on tablets in portrait mode and mobile phones.
Navigation
The Responsive Sidebar Navigation one can be positioned left or right and switches to a location below the image when viewed on narrower screens.
The links can be styled for font size, color, hover color, background color and its opacity and vertical spacing.
The navigation background color can be set for mobile use since this needs to be a solid color.
Current Page Indicator
The current page link can be indicated using a contrasting color to the link text. This is achieved by using a jQuery plugin to create an active class for the current page.
Navigation Position
The navigation widget is inserted below the header on the EverWeb design canvas and will appear as a sidebar overlay on the published page.
Active Link
There is an option to indicate the current page link with a different color. Selecting this option inserts a jQuery plugin to add an active link class to the existing navigation.
Disqus Comments Bar
In this example, the Responsive Comments bar sits below the header image with a solid background. It can also be made to overlay the item above it by checking a box and adding transparency to the background.
The bar has options for a phone number which switches to a "Call Me" button on mobile phones on the left and an email icon on the right.
The center icon shows a title on hover when viewed on computers and, when clicked or tapped, opens a modal with a Disqus comments section. This has fields for the Disqus shortname, the page ID and URL and the comments area can be styled with a border if required.
The comments area has responsive width, a maximum width setting and fields for setting the height and also the height when viewed on mobile phones. Any overflow will scroll.
Footer - Search Modal
The footer has a spy glass icon which opens a modal when clicked. This has a text introduction and a custom Google search feature which requires a Google custom search ID. Follow the link below to get one.
There is an optional smooth scroll to the top chevron with adjustable scroll time to the right.
The center section has options for adding text and a checkbox to turn on the script which automatically updates the copyright year.