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:

1. No JavaScript – this is 100% CSS
2. 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. Directly before <div class="quick-access"></div> add in the checkbox: <input type="checkbox" name="quick-access-checkbox" id="quick-access-checkbox"/>. 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.

<div class="quick-access">
    <div class="quick-access-container">
        <?php echo $this->getChildHtml('topSearch') ?>
        <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
        <?php echo $this->getChildHtml('topLinks') ?>
        <?php echo $this->getChildHtml('store_language') ?>
    </div>
    <label for="quick-access-checkbox" class="menu-toggle-button"><span class="visually-hidden">Menu</span><span aria-hidden="true" data-icon="&#xe000;"></span></label>
</div>

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:

#quick-access-checkbox {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Position the Quick Access Box Off Screen

I have chosen to hide the quick access box off of the top of the page but it could just as easily be hidden to the side. You can give the hidden content a fixed height, and position it off screen very easily:

.quick-access-container {
    height: 250px;
    overflow-y: auto;
}

.quick-access {
    position: fixed;
    top: -250px; /* Just enough to hide the content */
    left: 0;
    right: 0;
    z-index: 9999; /* Make sure it's on top of everything */
}

And then when the user hits the menu button the box just needs to be moved into the right position.

#quick-access-checkbox:checked + .quick-access {
    top: 0;
}

For a bit of extra eye candy, you can add a transition to have it slide up and down smoothly:

.quick-access {
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

Large Screen Styles

I generally write my CSS in a mobile first manner so the quick access box needs to be reset to the default position whenever the screen is large enough to accommodate it.

@media (min-width: 40em) {
    .quick-access-container {
        height: auto;
    }

    .quick-access {
        position: static;
    }
}

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.

Frequently Asked Questions on Building a Responsive Quick Access Box in Magento