F&S | Navigation designs

GENERAL INFO

Icons used: Entypo+ (available at http://fontello.com/)
Font used: "National" (Victoria's custom font, available here: https://github.com/victoriauniversity/vic-framework/tree/master/client/assets/fonts)

Note: Designs are overscaled to make the graphics more visible on the desktop. Relate the sizes to tablet's ones.

After initial load, with viewport aligned to a top of the page.

When user starts to scroll down (and viewport is no longer at the top of the page!). All 3 bars will snap to top + button 'go to top' appears.

When user expands the breadcrumbs panel.

When user opens main menu by tapping the 'hamburger menu' icon.

After initial load.

When user clicks on the search icon.

Note: Designs target lower tablet's threshold (~ 760px).

After initial load, with viewport aligned to a top of the page.

Shows combination of collapsed menu, collapsed header (happens when a user's viewport is no longer at the top of the page) and activated search bar.

Note: Ideas for navigation adjustment on the Victoria's homepage ONLY (could be useful for a future redesign).