Navigation

Full Width Header | Click To Drop Mobile Navigation

NOTE: If viewing this page on a computer, slowly reduce the browser width to that of an iPad to see the responsibe action and the header change.
Before installing the Full Width Click Header widget, open the Page inspector and adjust the Page Layout. Set the top margin and header heights to zero and set the contentt width to anywhere between 768 and 800px.
Drag the widget onto the page, set its position X & Y to zero and its width to that of the page content using the Metrics inspector rather than dragging.
The header will appear something like the screenshot below. Adjust the styles for the tablet version.

responsive header click drop navigation

Full Width Header

Check the "Full Width" box in the Metrics inspector and the full site version of the header will appear.
Before experimenting with the adjustment of the positions of the various items, it is better to set the other styles and create the links first. Preview this in the browser and the iOS Simulator to get an idea of how the varoius items work in relation to each other.
Unless it is obsolutely necessary, it's best to leave the header at the default height with the full site version of the navigation positioned at the bottom of it.
When positioning the h1 heading with the website name, make sure it is high enough up for the navigation to pass beneath it at narrow browser settings. Continually test settings in the browser and simulator until so experience is gained.

Fonts & Other Styles

The widget allows for non websafe or Google hosted fonts with a web safe fallback font. The same font is used forr the h1 heading and the navigation. There is seldom any need to change the font family in a whole website - far less within a page!
Note how the mobile navigation has a separate control for the tab background color from the full site version. This is in case the full site tabs are set with a zero backgound opacity to blend in with the header. If the mobile navigation drop down had a transparent background too it would rather hard to see!

Adding Links

The first three links are added by entering the item name and choosing the "Link to:" page. More links are added by checking the boxes.
The last link can be configured as an external link if required and this can also be set to open in a new window. This is useful for linking to an external blog, e-commerce store or a related website.

The Widget

The widget is included in the Full Width widgets pack. Click the "Widgets" tab in the navigation to see it and the many other ones required to create a responsive fullsite which also works well on a tablet such as an iPad.

EverWeb Widgets
© Roddy McKay - 2016
All Rights Reserved

Scroll To Top

This widget is included in the Full Width widget pack.