Building a Responsive Quick Access Box for Magento

The Quick Access Box

In most Magento themes, the quick access box appears at the top right of the site and usually contains links to handy stuff such as the cart, checkout and maybe a search box.

Handling this in a responsive design can be tricky. It takes up a lot of room at the top of the page and it’s not really something that you want to completely remove from a small screen view.

The Off Canvas Solution

One solution that I am proposing is to use an off canvas container with a toggle button to slide the content in and out of the screen.

This form of navigation has now become commonplace in mobile application design and is mainly seen in the form of a hidden sidebar.

There is a really great article all about off canvas navigation in Smashing Magazine if you would like to learn more.

The way I have implemented this is by using a hidden checkbox and using the :checked pseudo selector to toggle the visibility of the quick access box. This has a couple of advantages over other techniques:

No JavaScript – this is 100% CSS

Doesn’t change the browser history state — The same effect could be used with the :targetpseudo selector but I do not like the fact that it changes the history state by adding hashes (This is just a matter of personal opinion)

But there is also the drawback of the hidden checkbox being bad semantics.

The Template File

The quick access box is included in the header template file (app/design/frontend/base/default/template/page/html/header.phtml) in the default Magento theme.

Note: You should follow best practices and not edit this file but make the changes in your own theme.

The two most important things to add are the checkbox and the label to control the checkbox state.

The label can go anywhere on the page as long as it is marked as for the checkbox you just added. Bear in mind that the label will need to be clickable both when the quick access box is hidden and when it is shown as well.

I chose to include the label inside the quick access box and wrap the main content of the quick access box inside a container div. This way the label can appear at the bottom of the quick access box and slide down with it whenever it opens.

One other thing to note is that I have used an icon font in the label, but you can include whatever you want.

And that is all you need in the HTML. Pretty simple really.

The CSS

Hide the Checkbox

There’s no point in showing the checkbox on the page as it serves no real purpose apart from as a way of storing a true or false value. I like to use the HTML5 Boilerplate method of visually hiding elements:

Finishing touches

That’s the basic functionality complete. All that’s left to do is style it up to match your theme.

And here is an example of it in action on a very basic starter theme.

In the hidden view all you see is the menu button.

And when the menu button is pressed the quick access box slides down showing lots of useful links and features.

Browser Support

Browser support for this technique is very good, all modern browsers support :checked and transitions. Some older / not as feature filled mobile browsers don’t support position: fixed;, meaning the quick access bar isn’t guaranteed to stick to the top of the screen, but it gracefully degrades to just appearing at the very top of the website.

And a final note to remember is that IE8 doesn’t support media queries so you will need to add a polyfill if you are doing a mobile first design and want to support IE8.