Responsive Header - Lightbox Media
When viewed on computers, the header consists of a content area to the left and an image to the right. At narrow browser widths and on mobile devices, the image switches position to below the content area.
The relative widths of the content area and the image can be adjusted using a slider control.
Content
The content area has an h1 heading and options for an h2 heading, a logo and one or two CTA style link tabs.
The links can be configured to open internal or external pages and in a new window if required.
When displayed full width, both the content and the image have the same height. The height of the content can be reduced for both tablet devices like the iPad and for mobile phones.
If viewing this page on a computer, reduce the browser width to see the changes.
Image
The image is inserted in an HTML5 figure element so that it can have an optional caption as well as alt text for the search engines.
The caption is centered and can be placed at the top or bottom of the image.
Lightbox
When the lightbox option is turned on, a play button appears at the center of the image. This can open either a large image, a Vimeo video or a YouTube movie in a responsive lightbox window.
The image is inserted simply by choosing it from the Assets and the videos by entering their ID. Closing the lightbox will stop the video.
Navigation
The Responsive Top Nav widget creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices.
If viewing this page on a computer, reduce the browser width to see the navigation switch from one type to the other.
It can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
The navigation is designed to be used in conjunction with a hero image or other full width item. It can appear above or below or overlay the top or the bottom of the item. For an overlay, the navigation is placed below the hero image on the EverWeb design canvas and then the appropriate button in the widget settings is checked to place it in the required overlay position when viewed in the browser.
Current Page
The widget has an option to display the current page tab in a different color and also to add an animated underline to it.