This page template displays a responsive header, navigation, and general style for a minimal, clean, pseudo shop. If the viewport is narrower than 992px the menu will be placed the off canvas and will be shown with a smooth, slide-in effect.
Many considerations are made at all of the normal Bootstrap checkpoints in addition to the slide-in navigation. The header changes dramatically. Its height, the size of the logo, the display of the additional, secondary navigation, and the display of the fixed, mobile icons all lend to an engaging scaling effect.
The navigation is based off of the Jasny navmenu effect. The right-aligned slide-out navigation fits well in mobile viewports in the event of rapid opening and closing of the navigation panel. While the user can click anywhere outside of the visible panel to dismiss the navigation, the navigation can only be revealed by tapping the mobile nav menu icon. Since tapping is required to initiate the navigation panel, it makes sense that a double-tap or second tap in the same area would prove to be the easiest action for the user when dismissing the navigation. This reduces the learning curve for first-time users of the page. The translucent effect and shadow add some nice depth to the mobile menu.
The header content is pulled to the right and its width changes based on the screen resolution. The logo is placed as the background image and positioned to the left allowing for easy updates in the future.