> For the complete documentation index, see [llms.txt](https://docs.littlebaytech.com/templates/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.littlebaytech.com/templates/messaging-template/design-guides/design-overview.md).

# Design Overview

## Pages with the Header Navigation Reusable Element

On pages which utilize the `header_navigation` reusable element, the Current User has the option to view the left-side menu by clicking the hamburger icon:

![](/files/-LY6KX49OBhpOuLIXcSj)

When this element is clicked, the "ShowMenu" custom state (type: yes/no, list: no) on the `header_navigation` reusable element is set to **yes**. This causes the `FG - Mobile Menu` and `FG - Fade Overlay` elements to become visible on the page, in order to show the Current User the mobile menu:

![](/files/-LY6M2XbwGFukNMfISsb)

![](/files/-LY6MoQzxf8TZ6PGQy32)

{% hint style="info" %}
Make sure the `FG - Fade Overlay` and the `FG - Mobile Menu` elements are always above the other elements on the page.  These elements should also always expand the height of the entire page so they aren't cut off. 
{% endhint %}

When the page is minimized to mobile, the `header_navigation` reusable element remains visible, but the right-side navigation links collapse in width, since the Current User can click the hamburger menu to view the navigation links:

![](/files/-LY6DlfpMkq0jzm5_6vo)

## Pages with the Desktop Navigation Reusable Element

Most of the pages in the "Logged In folder" contain the `desktop navigation` reusable element, which is shown on the left-hand side of the screen when the current page width is 887 pixels or greater:

![](/files/-LWz3CO-P1bV-bgAibD2)

When the page shrinks below 887 pixels, this Group Desktop Navigation Container is collapsed using hiding rules, and the `Group Mobile Header` and `Group Mobile Navigation Container` elements become visible (the top blue navigation groups at the top of the page): 

![](/files/-LWz3FT_bML0tgL6MObV)

These element groups contain the `mobile header` and `mobile submenu` reusable elements:

#### `Mobile Header` reusable element

![](/files/-LWyauL4UryysIhQm-H3)

#### `Mobile Submenu` reusable element

![](/files/-LWyb39kUpXrdkYlQ49f)

{% hint style="info" %}
Tip: There are transparent link elements over the top of the icon elements in the `mobile submenu` reusable element.  In order to select and change the icon elements under the transparent links, click the transparent link and then use the **Command+Click** shortcut key to select the element underneath the transparent link elements.
{% endhint %}

## Tips to Make Sure Everything Displays Correctly

{% hint style="info" %}
To ensure the mobile menu always displays correctly, make sure that the `FG - Menu` and `FG - Fade Overlay` elements' heights are **equal** to the height of the page, and that they are above the other elements on the page.
{% endhint %}

{% hint style="info" %}
If you are unable to decrease the height of the page, after decreasing the heights of the groups on the page, it is most likely because the `FG - Mobile Menu` and `FG - Fade Overlay` elements are tall and hidden in the editor; you are trying to decrease the page height to be shorter than those elements. To fix this, make the `FG - Mobile Menu` and `FG - Fade Overlay` elements visible in the editor, and decrease their heights.  Then you will be able to decrease the height of the page.  
{% endhint %}