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:

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:

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.

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:

Please note that theIcon Show Mobile Menu (Logged In) element (within the Group Logged In element and inside of the header_navigation reusable element) is hidden on page load, and becomes visible when the current page width is less than or equal to 800 pixels. You can view this in the conditional formatting of that element.

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:

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):

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

Mobile Header reusable element

Mobile Submenu reusable element

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.

Tips to Make Sure Everything Displays Correctly

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.

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.