This page shows an example of the Hide 'n' Show stack in the ExtraContent1.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.

Hide 'n' Show settings 1
1. On this page I've added a FontAwesome button with some text to the content of the Hide 'n' Show stack (click on the image left to enlarge it). Paste this as plain text to the content of the stack:
<i class="icon-align-justify"></i>
Any other icon is possible, see this page. Instead of a FontAwesome icon you can add any other image to the HnS stack.


Hide 'n' Show stack MENU ExtraContent1
2. I've enabled the button "Show EC1 and Hide Logo" in the NotePad Theme Styles. In the settings of the stack I've selected that it should automatically be placed inside the ExtraContent1 position. Another option is ExtraContent2, below the title/slogan (see this example).
And the Start Action is 'Hide (Direct)' here. and I like the 'Toggle Slide' effect here. Try some of the other options.
I've set the Theme definition to 'Note Pad Menu'. 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 ExtraContent1 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) {
#pageHeader {margin-top: 60px;}
#myExtraContent1 {display: none;}}

4. The size and Colour of your icon. In the 'Theme Styles > FontAwesome Icons FontSize + Colours' you can select a font-size and color.
Other font-size? Paste this in the Custom CSS (any size is possible):
#myExtraContent1 [class^="icon-"] {font-size: 60px; text-indent: 3px;}