Designing a Burger Menu

The burger menu is ubiquitous in web design, fixed to the top right side of web pages. Developed for mobile users, they offer several benefits to all site visitors, compared to a traditional desktop menu extended horizontally along the top.

One of the biggest advantages gained by using a burger menu, is that you can use full and more descriptive title links, this makes it easier to navigate and boasts SEO. Whereas with desktop menus you often need to use one-word links.

The second problem with desktop menus is that on certain browser window sizes they break into two lines. This can happen when you have two windows open side by side. Just when you think you have got your desktop menu looking perfect, a request to add an extra link can mess all the breakpoints and your back to square one.

Burger menus list all items in a nice vertical list with plenty of space. You don’t need to cram things in or use lots of different drop-downs and category labels just to make menu items fit.

It is for this reason that Braw Media have streamlined our workflow by focusing on developing a great looking and easy to use burger menu while dropping the cumbersome desktop menu. It looks cleaner, is more predictable and avoids wasting time on something only 45% of visitors use, while 100% can use a burger.

As a bit of background, we use Bootstrap as a style framework for the sites we develop. Using a framework makes each site easier to maintain, helping streamline the workflow. Different developers can contribute, without learning the custom nomenclature of each site. Bootstrap has a built-in burger menu and we have used this for the basis of our design.

The standard Bootstrap burger menu uses SVG files to represent the three layers of the burger. Another way of doing this is to split each layer and use HTML span tag instead. These tags can then be easily styled and animated with CSS.

Braw Media wanted each of the three elements of the menu icon when animated to revolve clockwise. The top layer spins 45 degrees, the middle layer 720 degrees, while fading out, and the bottom layer 135 degrees, to form a cross with the top layer. A cross that can be toggled to close the menu. Having all elements revolve in the same direction is more pleasing to the eye. To see this in action please click the burger menu at the top right-hand side of this page.

Using CSS you can easily change the colour of the burger icon. You can change the colour during different toggle states as the menu open and closes. You can also adjust the size of each element. Our styles are managed using SCSS, but you can see how our burger menu has been styled using HTML and CSS below.

The burger menu is one web component – our aim at Braw Media is to help maximise the performance of each component to benefit our clients.

The burger menu is just one web component – our aim at Braw Media is to maximise the performance of each component to help make stand-out sites for our clients. Enjoy your burger!

HTML

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
CSS

/* burger */
.navbar .navbar-toggler {
background: none;
border: none; }

.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus {
outline: 0; }

.navbar .navbar-toggler .icon-bar {
display: block;
width: 32px;
height: 5px;
margin: 5px 0;
-webkit-transition: all 0.4s;
transition: all 0.4s; }

.navbar .navbar-toggler .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(45deg) translate(8px, 6px);
transform: rotate(45deg) translate(8px, 6px);
background: #ff834f;
width: 28px;
border-radius: 3px; }

.navbar .navbar-toggler .icon-bar:nth-of-type(2) {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
opacity: 1;
filter: alpha(opacity=1); }

.navbar .navbar-toggler .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(135deg) translate(-8px, 6px);
transform: rotate(135deg) translate(-8px, 6px);
background: #ff834f;
width: 28px;
border-radius: 3px; }

.navbar .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(0);
transform: rotate(0);
background: white;
border-radius: 0;
width: 32px; }

.navbar .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotate(0);
transform: rotate(0);
background: white;
border-radius: 0;
width: 32px; }

.navbar .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(0);
transform: rotate(0);
background: white;
border-radius: 0;
width: 32px; }