Press "Enter" to skip to content

Turn your tabs into a ‘hamburger’ menu


Below you can find a piece of code, which can be used to turn the standard Tabs menu into a hamburger one when you open the form on a mobile device, i.e. the maximum screen width is 800px. The code consists of 2 blocks, which need to be placed on the form. Please, refer to the following article on How to add JavaScript on Smartforms, if you have any question. The current approached was tested by me on K2 Cloud and it works.

When you place this code on a form with tabs and open it in the desktop browser, you will notice nothing. But on a mobile device with a screen width less than 800px you will see the following results.

This is one of the implementations of a hamburger menu. Special thanks to Glenn Smith, whose code I took as a basis. You can find much more on the Internet.

If you want the menu to be visible in the desktop browsers, you can play with max/min width OR completely remove the first media query and the @media … wrapper for the second part.

Leave a Reply

Your email address will not be published. Required fields are marked *

three × five =