A Look at the Off-Canvas Menu

Off Canvas Menus are used primarily with Mobile, touch devices,  and web. Off Canvas can provide an extremely useful and beautiful experience for users.

When a user clicks an icon/text/img it’s performs some sort of action (e.g. swiping left to right or right to left) that results in a vertical navigation menu sliding into the screen from off canvas.

See the Pen off-canvas by Rajib karmaker (@rajibchandrakarmaker) on CodePen.0

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five common groups:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.test {background: red;}


Continue reading Typical Device Breakpoints