How Do I ... Make a Right Column Subnav That Isn't Always On Top

You can do this with the following work around, but realize that it will not automatically update if you add child pages or rearrange the items via the My Sites view.

The steps for creating a simulated side nav are below. The gist is, you need to let it create the automatic one first, in the order that you want, then view the page source and copy and paste the code at the appropriate places into an HTML component, that can also be inherited down into the child pages. That inheritance is often the reason driving this work around. presently, side navigation doesn't inherit to the pages that are in the side navigation.

There is an example (top) of the autogenerated side nav on this page, with an HTML version of it based on the code sample below that is underneath the auto side nav.

Step 1: Create the pages that will appear in your side navigation and make sure to leave the "Hide in navigation" checkbox OFF, so the side nav is automatically generated by the CMS.

Step 2: View the source for the parent page with side nav in published form. If you don't know how to do this without publishing the page, here's how:

a. Open the page in Edit or Preview mode from author.ensemble.vt.edu

b. Edit the URL in the address bar of your browser

1.) remove "/editor.html" from the URL

- https://author.ensemble.vt.edu/editor.html/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html.html

- https://author.ensemble.vt.edu/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html.html

2.) add "?wcmmode=disabled" to the end of the URL

- https://author.ensemble.vt.edu/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html.html

- https://author.ensemble.vt.edu/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html.html?wcmmode=disabled

c. Press the RETURN key on the keyboard to load the URL

d. Depending on your browser, use the following command to view the page source:

CHROME = Ctrl+U (WIN), Command+Option+U (MAC)

FIREFOX = Ctrl+U (WIN), Command+U (MAC)

OPERA = Ctrl+U (WIN), Command+U (MAC)

IE/Edge = Ctrl+U

Safari = Command+Option+U

Step 3: Find the "VtSubnav" class and copy and paste from that <div> to its closing </div>

Here's the code for the example at right:

<a href="/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html/subnav01.html">Subnav 01</a>

</p></div></div>

<a href="/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html/subnav02.html">Subnav 02</a>

</p></div></div>

<a href="/content/ensemble_cms_vt_edu/en/help/how-to/hdid-subnav-html/subnav03.html">Subnav 03</a>

</p></div></div>

</div>

Please note that the code was cleaned up from what appears in the source from the CMS. This is to help make it clear how many </div> tags are needed beyond the last nav item in order to properly close the HTML snippet. If you are using this snippet and editing it to your needs, be sure to observe the structure and number of tags used in each item description and link. The only lines you will need to edit are the <a href ...> lines, and you can copy and paste as many items as needed. Remember, malformed HTML can completely lock a page from editing and the page must be deleted and recreated.

Step 4: Drag and drop an HTML component where you want the simulated side nav to appear

Step 5: Click on the HTML component box to make the component menu appear

Step 6: Click the wrench icon (Configure)

Step 7: Paste the HTML for the simulated sub nav into the HTML input area and click the checkmark

Step 8: Publish the page

You can now go to each child page and turn on the "Hide in navigation" checkbox and republish those pages to remove the autogenerated side nav.