Sometimes, Navigation files do not provide enough flexibility to meet the needs of a full navigation system. This can be the case when you need to highlight key calls to action, link to a page that is in a different section of the website, or display contact information and department lockups beneath the navigation menu.
A Section Sidebar (_sidebar.inc file) adds a supplementary navigation menu beneath the standard navigation menu in a more visually enhanced style. There are a few steps to creating this file.
HEAD'S UP: Due to the higher level of impact that this action has on university content, a Section Sidebar can only be created by Global Admin users. Contact Us for assistance.
How to Create a Section Sidebar
The Section Sidebar file can only be created by Global Admin users. See the image below for a sample of a Section Sidebar.
How to Edit a Section Sidebar
By default, a Section Sidebar can only be edited in the Source Code editor (unless the "wysiwyg" editor is manually turned on). Use the following instructions to make common edits.
How to Add a "Contact Us" Box to a Section Sidebar
A Contact Us box should be added when there is contact information needed in the navigation menu.
To add this, edit the Source Code and add the following code to a new set of <div></div> tags.
<div class="sidenav-alt"></div>Then, add the following Source Code to a new set of <header></header> tags.
<header class="icon-bubbles"> Contact Us</header>
Finally, in the editing interface, stylize each individual link using the Link with Arrow style and Unordered List style.
How to Add a "Related Links" Box to a Section Sidebar
A Related Links box should be added when there are navigation links that go to a different section of the CalLutheran.edu website, in order to provide a clear user experience.
To add this, edit the Source Code and add the following code to a new set of <div></div> tags.
<div class="sidenav-alt sidenav-related"></div>Then, add the following Source Code to a new set of <header></header> tags.
<header class="icon-web"> Related Links</header>
Finally, in the editing interface, stylize each individual link using the Link with Arrow style and Unordered List style.
| < Previous Article |