---
title: "Tutorials"
description: "We help designers, developers, hobbyists and business owners get the most out of the Joomla CMS.  Join us at our free monthly meetups, and let us help you with your Joomla projects."
url: "https://www.joomlalondon.co.uk/jugl-joomla-news/tutorials"
date: "2026-09-14T23:48:21+00:00"
language: "en-GB"
---

![](https://www.joomlalondon.co.uk/images/easyblog_articles/hamburger-menu-joomla-london-jspecialists-styled.png) ##  [ How to create a mobile hamburger menu for Joomla's default template - Protostar ](https://www.joomlalondon.co.uk/jugl-joomla-news/tutorials/how-to-create-a-mobile-hamburger-menu-for-joomla-s-default-template-protostar)

    Details    Written by: Scott Shaw   Category: [Tutorials](https://www.joomlalondon.co.uk/jugl-joomla-news/tutorials)    Published: 13 July 2016    Last Updated: 08 January 2021  This is a tutorial to demonstrate how you can simply use 1 menu, and style it differently on different devices without the need of duplicating your menus!

Here at [jSpecialists](http://jspecialists.com) we always use only 1 menu to display in all of the devices, and with the help of a 'custom module', a small bit of jQuery and CSS we have the ability to style the same menu however we like.

For this demo and guide, we have opted to use one of the default joomla templates (Protostar), a simple single tier navigation, with a 'hamburger' button on mobile devices. We will also be using some 'Font-Awesome' icons. We have set up a mini demo site here: <https://www.jspecialists.com/demo-home> [](https://www.jspecialists.com/demo-home)

 [ Read more … ](https://www.joomlalondon.co.uk/jugl-joomla-news/tutorials/how-to-create-a-mobile-hamburger-menu-for-joomla-s-default-template-protostar)

## Schema

```json
{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Start", "item": "https://www.joomlalondon.co.uk" }, { "@type": "ListItem", "position": 2, "name": "News", "item": "https://www.joomlalondon.co.uk/jugl-joomla-news" }, { "@type": "ListItem", "position": 3, "name": "Tutorials", "item": "https://www.joomlalondon.co.uk/jugl-joomla-news/tutorials" } ] }
```