Switching your guides to a side navigation layout may be the biggest change you make to increase their accessibility. However, it can make a huge difference in how users interact with your pages. It will improve the ease of navigation for mobile users, as well as those using keyboard navigation.
The biggest challenge with switching your guides to side navigation is needing to rearrange your boxes. With the tab layout, boxes can be in one to four columns. With the side navigation, boxes will be in a single column. (Exception: there is a "column 0" which is underneath the side menu options.) You may choose to rearrange your boxes before changing the guide to side navigation ("Method 1") or vice versa ("Method 2").
With Method 1, you will move all of your boxes into a single column before switching your guide's navigation layout. Arrange your boxes in the order you would like them to be on the page.
Select "Layout" underneath the page tabs. In the drop-down menu, choose "1 column."
After the page resets to a single column, select "Page." Select "Boxes" under "Reorder / Move."
Switching to a single column will have hidden some boxes. These will be indicated in pink. Drag boxes from the pink column(s) into "Column 1." Arrange them in the order you'd like. "Top Column" and "Bottom Column" boxes also need to be moved into "Column 1." Select "Save" when you are finished.
Before:
After:
Select the "Guide Layout" icon at the top of the screen next to the "Published" box. In the drop-down menu, select "Guide Navigation Layout."
Open the drop-down menu. Select "System Default - Side-Nav Layout."
Select the "Show all subpages in side navigation" box. Leave the "Show box-level navigation for selected page" box unchecked. Select "Save."
Verify the boxes are in the order you want them. To rearrange boxes, return to step one.
With Method 2, you will switch your guide to side navigation before moving your boxes into a single column. Boxes will be arranged in the order you would like them during the second step.
Follow the steps and screenshots provided above in Method 1: Step 2.
If you had boxes in multiple columns, you will receive a warning that boxes are not visible.
To resolve this issue, follow the steps provided above in Method 1: Step 1. Boxes moved into "Column 0" will appear underneath the side menu options. Note: When viewing the guide on a mobile device, anything in "Column 0" will appear above "Column 1."
