This page shows an example of the Hide 'n' Show stack in the ExtraContent2. This stack started as a much requested solution for my full screen photo Themes (Blow-Up, Xense and Outline).
Besides these predefined Theme definitions you can also use your own custom definitions to toggle the visibility of your content items.

1. On this page I've added an image as button with some text to the content of the Hide 'n' Show stack (click on the image left to enlarge it).
You can make a FontAwesome icon too, see this page.

2. In the settings of the stack I've selected that it should automatically be placed inside the ExtraContent2 position. Another option is ExtraContent1, above the title/slogan (see this example).
And the Start Action is 'Hide (Direct)'. Try some other options.
I've set the Theme definition to 'Custom' and entered #navcontainer into the input field (Content ID). Tooltip Text is up to you (click on the image left to enlarge it).

3. On your mobile device you have to hide the the Menu icon in the ExtraContent2 area (there's another menu icon after all). To do this paste this in the Custom CSS (Page-Inspector > Header > CSS):
@media screen and (max-width:768px) {
#myExtraContent2 {display: none;}}

4. When you don't use an image, but a FontAwesome icon you can set the size and colour of your icon in the 'Theme Styles > FontAwesome Icons FontSize + Colours'.
Other font-size? Paste this in the Custom CSS (any size is possible):
#myExtraContent2 [class^="icon-"] {font-size: 60px; text-indent: 3px;}