Portland Community College | Portland, Oregon Portland Community College

Web services

Sidebar navigation

The sidebar navigation is located at the top of the sidebar, above any callouts. It links to sibling-level pages.

If the page you’re viewing has any child pages, those pages will be displayed in the sidebar nested below your current page. If there are more than five child pages, a “view more” link appears as a sixth item – this keeps the sidebar from becoming too long if there are a large number of child pages.

WordPress automatically creates the sidebar navigation based on sibling and child pages. Before moving to WordPress, it was possible to divide the navigation into sections, each with its own heading. This is no longer possible, but you can include callouts below the navigation to provide links to additional resources.

Development info

  • Stylesheet location: /source-v6/styles/layout/_sidebar.scss
  • In Dreamweaver, use the Layout template property
    • Default value: two-col – includes sidebar
    • Alternate value: one-col – doesn’t include sidebar
  • In WordPress, check or uncheck the “Include sibling navigation” option in the PCC Sidebar settings box.
  • Adding additional navigation sections: 
    <h3>Section heading</h3>
<ul class="side-nav">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
</ul>

Styling

The parent-level heading is highlighted in sapphire, and uses the same background image as the site title. The current page is highlighted with a vertical turquoise line. Additional navigation menus (Profiles in this example) don’t have the background image.

Responsive behavior

On small screens, the sidebar moves below the content, but its appearance doesn’t change.